Strategisches Website-Design Bootcamp™ – Mit Webflow ergebnisorientiert schöne Websites erstellen

1. Willkommen bei strategischem Website-Design: Was genau wirst du in diesem Kurs lernen? In diesem Kurs lernen Sie nicht nur , wie Sie eine Website erstellen, sondern Sie lernen auch, wie Sie eine Website erstellen, die Ihrem Unternehmen strategisch zum Wachstum verhilft. Die Wahrheit ist, dass Sie mit einer Website, die einfach gut aussieht, keine Ergebnisse erzielen. Was Sie brauchen, ist eine Website, die schön aussieht, sich aber auch strategisch auf die Ziele Ihres Unternehmens konzentrieren kann strategisch auf die Ziele Ihres Unternehmens konzentrieren . Egal, ob Sie noch keine Erfahrung im Bereich Website-Design oder auch nur ein bisschen Erfahrung im Bereich Website-Design haben , dieser Kurs wird Ihnen helfen, das Webdesign auf einem Niveau zu verstehen, das keine 0,1% der Website-Designer auf der ganzen Welt verstehen Ich kann das mit Zuversicht sagen, weil ich weiß, dass viele Website-Designer wissen, wie man eine Website erstellt Sie wissen nicht unbedingt, warum sie das tun, was sie tun In diesem Kurs werde ich Ihnen zeigen , wie Sie eine Website erstellen , mit der Sie die Ergebnisse erzielen können, die Sie benötigen. Wir werden lernen, wie Ihre Website-Besucher denken, wenn sie tatsächlich auf Ihrer Website landen, wie Sie Vertrauen bei Website-Besuchern aufbauen und wie Sie sie dazu bringen können, bestimmte Maßnahmen zu ergreifen , die Sie zur Erreichung Ihrer Geschäftsziele benötigen. Und Sie werden in der Lage sein, die Website Ihres Traums zu erstellen , indem Sie einfach den schrittweisen Prozess in diesem Kurs befolgen. Sie müssen nicht Tausende für einen teuren Website-Entwickler bezahlen . Das Beste daran ist, dass Sie nichts über Programmierung, Website-Entwicklung, Strategie oder Design verstehen müssen , da wir Ihnen helfen können, die perfekte Website für Ihr Unternehmen in schönen, kleinen und leicht verständlichen Lektionen zu erstellen die perfekte Website für Ihr Unternehmen in schönen, . in diesen Kurs investieren, erhalten Sie außerdem Zugriff auf eine Premium-Vorlage , mit der Sie Ihre Website schneller erstellen und sie in wenigen Minuten professionell und vertrauenswürdig aussehen lassen können . Dann müssen Sie sich nur noch etwas Zeit nehmen, um die Website für Ihre Marke und Ihr Unternehmen persönlich aussehen zu lassen, und schon haben Sie die perfekte Website um Kunden anzulocken. Unser einziger Fokus für diesen Kurs lag darauf, es für jeden Unternehmer oder Gründer auf der ganzen Welt so einfach und unkompliziert wie möglich für jeden Unternehmer oder Gründer zu machen , in einem Bruchteil der Zeit und zu einem Bruchteil der Kosten eine Website zu erstellen, die perfekt zu seiner Marke passt. Anstatt Tausende für die Entwicklung einer wirklich großartigen Website auszugeben , können Sie lernen, wie Sie sie selbst erstellen und sie für Ihr Unternehmen erstellen und sie im Laufe der Zeit und mit dem Wachstum Ihres Unternehmens ändern können. Als Gründer oder Unternehmer müssen Sie verstehen, wie Ihre Website nach dem Start mit Ihrem Unternehmen wachsen kann . Sobald wir Ihnen tatsächlich beim Start Ihrer Website geholfen haben und Ihnen geholfen die oberste Seite von Google zu gelangen, auf die oberste Seite von Google zu gelangen, was etwas später im Kurs erscheint, werden wir Ihnen auch beibringen, wie Sie Ihre Website im Laufe der Zeit verbessern können, wenn sich Ihr Unternehmen entwickelt. Auch weil Sie in diesen Kurs investiert haben und darauf vertraut haben, dass wir Sie durch diesen Prozess führen, werden wir Ihnen noch ein paar Geschenke machen. Etwas später im Kurs zeigen wir Ihnen, wie Sie kostenlosen Premium-Support für Ihre Website erhalten . Das bedeutet, dass Sie rund um die Uhr jemanden haben, der Ihnen hilft, die Dinge so schnell wie möglich wieder zum Laufen zu bringen, wenn mit Ihrer Website etwas schief geht mit Ihrer Website jemanden haben, der Ihnen hilft, die Dinge so schnell wie möglich wieder zum Laufen zu bringen, wenn . Dazu gehören auch alle Fragen, die Sie haben, wenn Sie selbst Korrekturen vornehmen möchten. Es ist im Grunde so, als hätten Sie einen kostenlosen Assistenten, der Ihnen Tag für Nacht rund um die Uhr bei Ihrer Website hilft. Ich werde Ihnen auch exklusiven Zugriff auf unsere Premium-Icons und unser Grafikpaket gewähren. Diese Symbole und Grafiken wurden von unserem Team individuell entworfen und stehen nur Teilnehmern dieses Kurses zur Verfügung. Verwenden Sie diese Axim-Symbole und -Grafiken für Kunden-Websites , an denen wir gerade arbeiten bis zu 20.000$ kosten Und als ob das nicht genug wäre, werden wir auch jedem einzelnen Studenten, in diesen Kurs investiert , zeigen, wie man eine Software installiert , mit der Sie die Mausbewegungen jedes einzelnen Besuchers Ihrer Website verfolgen können die Mausbewegungen jedes einzelnen Besuchers Ihrer Website jedes einzelnen Besuchers diese Weise können Sie sehen, wo die Leute klicken was nicht. So können Sie Ihre Website im Laufe der Zeit verbessern, um die Konversionsrate zu optimieren und das beste Ergebnis zu erzielen Ich weiß, dass Sie sich darauf freuen , loszulegen, und ich auch. Lassen Sie uns also in den Kurs eintauchen und wir sehen uns in der nächsten Lektion. 2. Warum ist Webflow das Beste?: Also, was ist Webfloor und warum ist er so besonders? Nun, ich bin mir sicher, dass Sie sich dessen voll bewusst sind, es online viele verschiedene Website-Builder gibt. Es gibt jedoch einige große Unterschiede zwischen anderen Website-Buildern und Web Floor und dem, was Web Floor zu bieten hat. Mittlerweile gibt es viele Gründe, warum Web Floor die am schnellsten wachsende Plattform zur Erstellung von Websites auf dem Planeten ist die am schnellsten wachsende Plattform zur Erstellung von Websites . Und nur einer der Gründe, warum so viele Menschen auf der ganzen Welt andere ältere Website-Builder wie WordPress, Wicks und Square Space verlassen , ist , dass Sie auf Webfloor buchstäblich atemberaubende Websites erstellen können, die ergebnisorientiert sind und Ihnen helfen können und ohne Kosten auszubauen , Ihr Geschäft in einem Bruchteil der Zeit ohne Code und Erfahrung und ohne Kosten Sie können Ihre gesamte Website zunächst kostenlos ohne Code und ohne Erfahrung im Design erstellen und atemberaubende, professionelle und vertrauenswürdige Websites für Ihr Unternehmen erstellen. Und das ist nicht der einzige Grund, warum so viele Gründer und Unternehmer andere Plattformen zum Erstellen von Websites wie WordPress, Shopper Fi, Wicks und Squarespace verlassen andere Plattformen zum Erstellen von Websites wie WordPress, Shopper Fi, , um die Vorteile von Web Floor und dessen, was Web Floor zu bieten hat, tatsächlich voll Web Floor und dessen, was Web Floor Wenn Sie eine der Plattformen zum Erstellen von Websites verwendet haben, werden Sie feststellen, dass sie in Bezug auf das, was Sie erstellen können, ziemlich restriktiv sind in Bezug auf das, was Web Floor ist jedoch sehr, sehr unterschiedlich. Web Floor gibt Ihnen die völlige Freiheit, pixelgenau das zu erstellen, was Sie wollen. Und das Beste daran ist, dass Sie keine einzige Codezeile schreiben weil Web Floor das mit EI automatisch für Sie erledigt. Und als Berater für Markenentwicklung erstelle ich persönlich Websites für mich und für meine Kunden, jede einzelne meiner Lieben, und jede einzelne meiner Websites, die ich persönlich besitze, befindet sich auf der Webfloor-Plattform. Web Floor hat es mir ermöglicht, benutzerdefinierte Websites zu erstellen , ohne dass eine einzige Codezeile von mir selbst erstellt wurde. Das hat meinem Unternehmen tatsächlich zum Wachstum verholfen. Sie können zunächst eine vertrauenswürdige Website erstellen, genau so, wie Sie es möchten und die im Handumdrehen professionell aussieht. Einer der besten Vorteile, die ich liebe, ist die Tatsache , dass das EI hinter dem Webflow so intelligent ist, wenn es den Code für Ihre Website hinter den Kulissen schreibt Es tut dies tatsächlich so , dass Ihre Website schneller geladen wird und Ihren Website-Besuchern eine bessere Benutzererfahrung geboten wird. Es stellt auch sicher , dass Ihre Website vollständig reagiert, unabhängig davon welchem Gerät Ihre Benutzer auf welchem Gerät Ihre Benutzer Ihre Website aufrufen. Und als ob das nicht genug wäre, das, was mich vor vielen Jahren auf Webfloor wirklich überzeugt hat, war die Tatsache, dass ihr Premium-Support anders ist als alles, was ich je von einem Unternehmen erlebt habe. Ich erinnere mich tatsächlich daran, fast meine gesamte Website gelöscht zu haben. Aber zum Glück haben sie dank Webfloor innerhalb von 30 Minuten, nachdem ich ihnen eine E-Mail geschickt habe, buchstäblich eine Antwort gegeben. Sie haben es geschafft, die Website zu speichern und alles war absolut in Ordnung In der nächsten Lektion dieses Kurses werde ich Ihnen zeigen, wie Sie kostenlosen Premium-Support mit Webfloor erhalten können , sodass sie sich immer schneller bei Ihnen melden können, um sicherzustellen, dass sie sich bei Fragen aller Art zuerst als VIP bei Ihnen melden Ich werde auch sicherstellen , dass Sie Zugriff auf alle unsere Vorlagen haben , damit Sie Ihre Website schneller erstellen können, unser Premium-Icon - und Grafikpaket sowie auf die Verhaltensverfolgungssoftware, mit der Sie Ihre Website im Laufe der Zeit verbessern können. Aber wie dem auch sei, ich werde das bis dahin in der nächsten Lektion besprechen. Vielen Dank für Ihre Zeit und wir sehen uns in der nächsten. 3. Hol dir deine kostenlosen Webflow-VIP-Geschenke: Wie erhalten Sie also Ihren kostenlosen Webfloor-Premium-Support, Website-Vorlagen, Symbole und Grafiken sowie Verhaltenssoftware, damit Sie jederzeit genau verfolgen können , was Ihre Benutzer auf Ihrer Website tun? Jetzt haben wir dieses kostenlose Paket für jeden einzelnen Schüler erstellt , der in den Umgang mit Web Floor investiert hat, weil wir möchten, dass Sie die bestmögliche Erfahrung auf der Plattform haben . Deshalb hilft uns Webflow gerne dabei, dies zusammenzustellen , um Ihnen die bestmögliche Erfahrung Um diese Geschenke absolut kostenlos zu erhalten, müssen Sie nur auf Forward Slash Webflow der Marke Lancaster Academy of Design gehen Forward Slash Webflow der Marke Lancaster Academy of Design EIN VIP. Ich hinterlasse auch einen Link im Anruf, damit Sie einfach darauf klicken können, um ganz einfach direkt zu dieser Seite zu gelangen . Wenn Sie jetzt die Seite besuchen, werden Sie so etwas sehen. Erstellen Sie Ihre Website besser und schneller. Und wenn Sie nach unten scrollen, können Sie sehen dass der erste Schritt darin besteht, unten zu klicken und sich für einen Webflow anzumelden , um kostenlosen Premium-Support zu erhalten. Nur um völlig transparent zu sein Wenn Sie den Link tatsächlich kopieren, auf diese spezielle Schaltfläche klicken und dann suchen, was es ist, ist es im Grunde ein kostenloser VIP-Support-Link , den wir mit Webflow eingerichtet haben , um sicherzustellen, dass Sie bei der Nutzung der Plattform vorsichtig sind Und wenn Sie auf diese Schaltfläche klicken, werden Sie direkt zur Webflow-Startseite weitergeleitet sodass Sie sich anmelden und mit dem Aufbau Ihrer Website beginnen können, die wir später im Kurs eingehen werden auf die wir später im Kurs eingehen werden. Sobald Sie auf der Webflow-Startseite sind, ist es wirklich einfach, sich anzumelden Aber wenn Sie irgendwelche Probleme haben, lassen Sie es mich bitte wissen, kontaktieren Sie mich einfach und ich werde Sie so gut wie möglich unterstützen Wenn Sie sich also tatsächlich angemeldet und Ihre E-Mail-Adresse gelüftet haben, merken Sie sich diese E-Mail-Adresse, da Sie sie im zweiten Schritt des Prozesses benötigen werden sie im zweiten Schritt des Prozesses Jetzt ist es wirklich wichtig, dass die E-Mail-Adresse, mit der Sie sich bei Webflow anmelden Die E-Mail-Adresse , die Sie in Schritt zwei des Vorgangs verwenden , identisch Der Grund dafür ist wirklich einfach. Wenn wir Ihre kostenlose Website-Vorlage senden, senden wir sie grundsätzlich direkt an Ihr Webflow-Konto. Wenn Sie nicht für beide Schritte dieselben E-Mail-Adressen verwenden , könnte die Website-Vorlage letztendlich in einem anderen Konto landen und Sie sie möglicherweise nicht verwenden können. Wir senden auch Ihre Symbole und Grafikpaket dorthin und senden auch den Link zur Verhaltenssoftware an die E-Mail-Adresse, die Sie in Schritt zwei hinzugefügt haben. Und wenn Sie ein Freelancer sind und Websites für Kunden erstellen, können Sie diesen Link jedes Mal verwenden , wenn Sie einen neuen Kunden oder Kunden anmelden Sie können ihnen nicht nur kostenlosen bevorzugten VIP-Support bieten, sondern ihnen auch eine kostenlose Website-Vorlage besorgen , damit Sie ihre Website schneller erstellen können. Denken Sie nur daran, sicherzustellen, dass der Kunde dieselbe E-Mail-Adresse für die Webflow-Registrierung und auch für Schritt zwei des Prozesses verwendet für die Webflow-Registrierung , damit wir sie überprüfen und sicherstellen können, dass Ihre Website-Vorlage im richtigen Konto landet. Sehen wir uns zum Beispiel an, dass ich mich bereits mit meiner E-Mail-Adresse bei Webflow angemeldet habe und dann meine andere E-Mail-Adresse hier hinzufügen wollte, um dann kostenlose Geschenke zu erhalten, die der Webflow-E-Mail dann kostenlose Geschenke zu erhalten entsprechen Perfekt. Sobald wir Ihre E-Mail erhalten haben, werden wir uns innerhalb von 24 Stunden mit Ihrer Vorlage, Ihrem Symbol- und Grafikordner sowie dem Link zum Herunterladen Ihrer Verhaltenssoftware bei Ihnen melden Ihrem Symbol- und Grafikordner . Absolut kostenlos. Es wurden keine Fragen gestellt. 4. $500 vs. $10.000 Website: Die Wahrheit ist, wenn Sie Preise von Agenturen oder Freelancern haben , werden Sie feststellen, dass Sie für eine Website zwischen 500 und 10.000 US-Dollar zahlen können 500 und 10.000 US-Dollar ganz ehrlich zu sein, 500-Dollar-Website und eine 10.000-Dollar-Website Warum sollte also jemand zusätzliche 9.500 USD für eine Website im Wert von 10.000 USD zahlen 9.500 USD für eine Website im Wert von 10.000 USD Wenn sie etwas bekommen können , das sehr ähnlich aussieht, für Nun, lassen Sie mich Ihnen einen kleinen Einblick in meine Erfahrung geben und darüber, wie ich innerhalb weniger Jahre von 500 USD für eine Website auf 10.000 USD gestiegen von 500 USD für eine Website auf bin . Obwohl zwei Websites sehr ähnlich aussehen mögen, können die tatsächlichen Ergebnisse, die diese beiden Websites erzielen, sehr unterschiedlich sein Und das liegt im Wesentlichen an der Struktur der Website, der Kopie auf den Websites, der Art und Weise, wie die eigentliche Website Benutzer zu bestimmten Aktionen anleitet. Zum Beispiel könnte es eine Website geben, die toll aussieht und deren Erstellung bei einem Freelancer 500$ kostet, aber die Realität ist, dass es 1.000 Menschen braucht, um auf diese Website zu kommen , um tatsächlich einen konvertierten Kunden zu bekommen , für etwas von der Marke bezahlt Andererseits könnten Sie eine Website haben, die strategisch so entwickelt und organisiert wurde , dass mehr Besucher in zahlende Kunden umgewandelt werden, und diese Website benötigt nur 50 Kunden, und diese Website benötigt nur um einen Kunden zu konvertieren . Wie Sie sehen können, 51.000 ganz anders Dieser Unterschied ist nicht nur darauf zurückzuführen , wie die Website aussieht, sondern auch darauf, wie die Website organisiert ist und wie Sie die Besucher der Website davon überzeugen und sie sanft dazu drängen, bestimmte Aktionen innerhalb der Website zu ergreifen Das war vor etwa acht Jahren eine enorme Lernkurve für mich Als ich anfing, wirklich zu verstehen, was die Unterschiede zwischen einer Website waren , die wirklich auf die Unternehmensziele ausgerichtet war , und einer Website, die einfach wirklich gut aussah. Das heißt nicht, dass eine strategische Website nicht gut aussehen kann, aber im Grunde bedeutet es , dass sie nicht die Priorität haben sollte. Es kann gut aussehen, aber es geht nicht nur darum, wie die Website aussieht. Wie wir gerade behandelt haben, der erste Hauptunterschied zwischen einer 10.000-Dollar-Website und einer 500-Dollar-Website letztendlich darin , dass sie zielgerichtet Die 500-Dollar-Website mag gut aussehen und sich sogar angenehm anfühlen, aber die 10.000-Dollar-Website wird strategisch so konzipiert sein, dass sie Ihnen hilft, mehr Traffic in zahlende Kunden umzuwandeln mehr Traffic Nun, der zweite Grund ist alles auf Kalorien zurückzuführen. Und mit Kalorien meine ich nicht das Essen, das wir essen, sondern ich meine mentalen Kalorien. Wenn wir also eine Website haben, die es uns wirklich leicht macht , das gewünschte Ergebnis zu erzielen, verbrauchen wir weniger mentale Energie, und das verringert die Wahrscheinlichkeit , dass wir geistig erschöpft sind. Zum Beispiel, wenn Sie jemals eine Website besucht haben und sie einfach extrem kompliziert zu bedienen war und Sie einfach viel, viel Energie aufwenden, um das gewünschte Ergebnis zu finden. Und dann wird es Ihnen irgendwann einfach langweilig und Sie verlassen die Website einfach ganz und suchen sich eine andere Alternative. Das nennt man geistige Erschöpfung. Und das liegt letztendlich daran, dass wir zu viel Energie und Kalorien in unserem Kopf verbrauchen , um das gewünschte Ergebnis zu erzielen. Während eine 500-Dollar-Website es für den Besucher der Website möglicherweise schwieriger macht für den Besucher der Website möglicherweise schwieriger , das zu bekommen, was er braucht, wird eine 10.000-Dollar-Website diesen Prozess rationalisieren, damit er viel schneller ans Ziel kommt. Das alles kommt auf die richtige Strukturierung Ihrer Website an , auf die wir später im Kurs eingehen Letztlich möchten wir den Benutzer so schnell und effizient wie möglich von dort, wo er sich gerade befindet, dorthin bringen den Benutzer so schnell und effizient wie möglich von dort, wo , wo er sein muss. Wie Sie sich anhand der ersten beiden Punkte vorstellen können, der dritte Vorteil, warum eine 10.000-Dollar-Website und liegt der dritte Vorteil, warum eine 10.000-Dollar-Website und eine 500-Dollar-Website so unterschiedlich einfach in den Gewinnen, die damit erzielt werden können Wenn Sie einen und alle 50 Benutzer auf Ihrer Website konvertieren, im Gegensatz zu jedem einzelnen und 1.000, wird dies natürlich 50 Benutzer auf Ihrer Website im Gegensatz zu jedem einzelnen und 1.000, einen erheblichen Unterschied in Bezug auf den Geldbetrag ausmachen in Bezug auf den Geldbetrag , den Sie jeden Monat generieren können Außerdem kostet es Sie weniger, Kunden zu gewinnen, und Sie können dadurch auch mehr Vertrauen bei den Kunden aufbauen , sodass Sie später mehr verlangen können. Um also nur die drei Hauptunterschiede zwischen einer 10.000-Dollar-Website und einer 500-Dollar-Website zusammenzufassen zwischen einer 10.000-Dollar-Website und einer 500-Dollar-Website Sie alle werden in diesem Kurs in den kommenden Lektionen lernen in diesem Kurs in den kommenden Lektionen sicherzustellen, dass Ihre Website strategisch auf die Ziele Ihres Unternehmens ausgerichtet ist strategisch auf die Ziele Ihres Unternehmens ausgerichtet Wenn das noch keinen vollständigen Sinn ergibt, machen Sie sich keine Wir werden sehr bald alles behandeln. Zweitens wird eine 10.000-Dollar-Website so gestaltet , dass Ihre Nutzer weniger mentale Energie verbrauchen So können Sie eine bessere Konversionsrate auf Ihrer Website erzielen und letztendlich mehr Geld verdienen, was uns zu Vorteil drei führt, nämlich mehr Gewinn und Umsatz zu erzielen Ich betrachte meine Websites immer als die besten Verkäufer in meinem Geschäft Jede der Websites, die ich für jedes meiner Unternehmen habe , sollte diese bestimmte Marke bestmöglich repräsentieren Es sollte uns die bestmögliche Chance geben , jemanden, der die Website gerade besucht, in einen zahlenden Kunden umzuwandeln . Das können wir tun, und das wird Ihrer Marke und Ihrem Unternehmen wirklich helfen , exponentiell zu wachsen Und das Beste daran ist, dass Sie, sobald Sie sich die Mühe gemacht haben, die Website zu erstellen und sie richtig zu machen und natürlich alles richtig gemacht haben, was wir in diesem Kurs behandeln werden, nie wieder mit der Website zu tun haben Sie verfügen also durchweg über diese digitale Ressource, und die Mitarbeiter arbeiten fast jedes Jahr hart für Sie , um Ihnen mehr Geld und Umsatz zu bringen. Wie ich bereits erwähnt habe, werden wir nun jeden Schritt behandeln damit Sie lernen, Websites zu erstellen, genau wie ich es in dieser Lektion erwähnt habe. also ohne weitere Verzögerung Lassen Sie uns also ohne weitere Verzögerung mit der nächsten Lektion des Kurses fortfahren. Ich werde dich sehen. 5. Ein nahtloses Nutzererlebnis schaffen: Wie schaffen Sie also ein nahtloses Benutzererlebnis auf Ihrer Website Nun, der erste Schritt besteht darin, den Unterschied zwischen UX und UI zu verstehen . Also, was ist UI? Nun, UI ist die Interaktion zwischen Mensch und Computer. Es geht im Wesentlichen darum, wie Sie als Benutzer und die Website miteinander interagieren , um ein Gesamterlebnis zu schaffen, was uns dann zu U X führt, was für Benutzererfahrung steht. Benutzererfahrung ist nun die Art und Weise, wie die Website visuell aufgebaut ist. Dies konzentriert sich im Wesentlichen darauf, wie der Benutzer das Gefühl hat , tatsächlich mit Ihrer Website zu interagieren. Dies ist jetzt auch für Software und andere digitale Plattformen relevant . Im Moment konzentrieren wir uns jedoch nur auf Ihre Website, um sicherzustellen, dass Sie ein möglichst nahtloses Erlebnis bieten können Ihren Website-Besuchern ein möglichst nahtloses Erlebnis bieten können. Was sind also die Hauptunterschiede zwischen UI und UX? Der erste Hauptunterschied ist nun der Schwerpunkt des Geltungsbereichs. Jetzt, wo sich die Benutzeroberfläche auf Schaltflächen und andere Dinge konzentriert , mit denen der eigentliche Benutzer interagieren wird, ist UX ein bisschen anders. UX hingegen konzentriert sich nicht auf bestimmte Schaltflächen oder Elemente, sondern mehr auf die Gesamtwahrnehmung und das Gesamterlebnis des Benutzers auf der Website Der zweite Hauptunterschied ist die Verantwortung. Wo sich UY darauf konzentriert, wie die Website aussieht und welche Farben die Dinge haben und all diese Dinge? UX konzentriert sich darauf, wie sich der Kunde tatsächlich fühlt und auf seiner tatsächlichen Reise, von dort, wo er sich befindet, dorthin zu gelangen, wo er sein muss, damit die Marke ihre Ziele erreicht. Zusammenfassend lässt sich sagen, dass sich die Benutzeroberfläche darauf konzentriert, wie die Dinge aussehen, und UX konzentriert sich darauf, wie sich der Kunde oder Benutzer fühlt, wenn er diese bestimmte Website besucht Was sind also die Vorteile von UI und UX? Nun, die grüne Nachricht ist, dass Sie kein Experte für UI und UX sein müssen , um tatsächlich eine großartige Website zu erstellen. Und der Grund dafür ist , dass wir bereits Vorlagen erstellt haben , auf denen Sie für Ihre Website aufbauen können , um letztendlich sicherzustellen, dass alle wichtigen Grundregeln bereits vorhanden sind Das bedeutet, dass unabhängig davon was Sie an der Vorlage ändern, sie immer auf den wichtigsten Grundlagen und Best Practices von UI und UX basiert den wichtigsten Grundlagen und Best Practices von UI und Solange Sie die Vorlage also nicht vollständig löschen, können Sie letztendlich nicht weit kommen Was sind die Hauptvorteile der Verwendung von UI und UX und , dass Sie während des gesamten Erstellungsprozesses Ihrer Website darüber nachdenken des gesamten Erstellungsprozesses Ihrer Website Nun, der erste ist die erhöhte Benutzerzufriedenheit. Das bedeutet im Wesentlichen, dass, wenn jemand auf Ihre Website kommt, es wahrscheinlicher ist, dass er die Ziele erreicht, die Sie sich für Ihre Website gesetzt haben, was etwas später im Kurs herauskommen wird, und dass er auch eine positivere Erfahrung machen wird. Daher wird es wahrscheinlicher sein, dass sie die Website in Zukunft erneut besuchen, was mich zum nächsten Vorteil führt, nämlich der erhöhten Nutzerbindung Dies bedeutet im Wesentlichen, dass die Leute mit größerer Wahrscheinlichkeit mehr Zeit auf der Website verbringen, wodurch Sie bei Google nach oben klettern und Sie im Wesentlichen viel früher auf die erste Seite gelangen Machen Sie sich noch keine Sorgen um SEO. Wir werden das später im Kurs behandeln, weil es eines der letzten Dinge ist , die Sie einrichten müssen, bevor Sie Ihre Website tatsächlich starten . Aber denk einfach daran. Je mehr Zeit jemand auf Ihren Webseiten verbringt, desto wahrscheinlicher ist es, dass Google Ihnen vertraut. Und vertrau mir, Google weiß alles. Wenn wir also UI und UX verwenden können, um Ihnen beim Aufbau einer Website zu helfen , die letztendlich mehr Aufmerksamkeit von den Nutzern erhält. Daher war Google Sess vertrauenswürdiger. Es ist wahrscheinlicher, dass es in naher Zukunft auf der ersten Seite von Google zu finden in naher Zukunft auf der ersten Seite von Google Einer der größten Vorteile, wenn Sie UI und UX während der gesamten Entwicklung Ihrer Website verwenden und strategisch darüber nachdenken , ist die Tatsache, dass Sie so viel Zeit und Geld bei der Entwicklung Ihrer Website sparen Sie so viel Zeit und Geld bei der Entwicklung und tatsächlich sicherstellen, dass Sie viel früher die bestmöglichen Ergebnisse erzielen. Es gibt nichts Schlimmeres, als eine Website zu entwickeln und eine Menge verschiedener Änderungen vorzunehmen. Es wird nur eine Menge Zeit verschwenden, und wenn Sie dafür bezahlen, dass jemand das für Sie erledigt, wird es Sie auch eine Menge Geld kosten. Sie sicherstellen, dass Ihre Website beim ersten Mal perfekt erstellt wird, ersparen Sie sich auf lange Sicht viel Mühe Eines der wichtigsten Dinge, die aus UX- und UI-Sicht wirklich beachten sollten , ist, die Dinge klar und einfach zu halten Und der Grund, warum ich immer wieder geistige Erschöpfung und mentale Kalorien erwähne , ist, dass wir möchten , dass der Nutzer beim Surfen auf Ihrer Website so wenig mentale Kalorien wie möglich mentale Kalorien wie möglich zu sich wahrscheinlicher, dass sie mehr Zeit auf Ihrer Website verbringen. Sie werden eine positivere Erfahrung machen. Und schließlich werden sie das Ziel, das Sie sich für Ihre Website gesetzt haben, tatsächlich erreichen, um Ihrem Unternehmen zum Wachstum zu verhelfen. Eine weitere wichtige Rolle für ein großartiges UI-UX spielt nun die Konsistenz. Eines der einfacheren Beispiele dafür ist der Aufruf zum Handeln. Sollte auf Ihrer gesamten Website eine einheitliche Farbe für den Aufruf zum Handeln haben . Das heißt, wenn Sie versuchen, den Benutzer zu einer bestimmten Aktion zu bewegen oder ihn davon zu überzeugen, auf eine bestimmte Seite zu gehen, müssen diese bestimmten Schaltflächen alle exakt dieselbe Farbe und diese Schaltflächen müssen hervorstechen, und das ist im Grunde etwas wirklich Einfaches, das Sie in Sekundenschnelle tun können, und das kann sich wirklich auf die Leistung Ihrer Website auswirken Letztlich schulen wir den Benutzer darin, das zu verstehen. Diese besondere Farbe führt zum Handeln. Sie möchten sich also auf der gesamten Website auf diese bestimmte Farbe konzentrieren . Das bedeutet im Grunde , dass jedes Mal, wenn sie eine Taste in dieser bestimmten Farbe sehen, sie nach rechts zu dieser bestimmten Taste führt und sie sie mit größerer Wahrscheinlichkeit drücken. Und bevor ich diese Lektion beende, möchte ich Ihnen nur ein Beispiel dafür geben, was UI und UX tun können, um die Benutzererfahrung wirklich zu verbessern. Wenn wir uns also einfach mit diesem H&M-Beispiel befassen, bei dem sie im Wesentlichen eine Breadcrumb-Navigationsfunktion auf ihrer Website haben , können Sie wirklich sehen, wie nützlich dies für die Benutzererfahrung sein könnte nützlich dies für Zum Beispiel, wenn jemand nach einem Handtuch sucht und dann zu Strand- und Baumwoll-Strandtüchern geht, aber dann möchte er zurück zu Handtüchern gehen, um sich andere Optionen anzusehen Anstatt den ganzen Weg zurückzugehen oder die Reise vielleicht von vorne zu beginnen, müssen sie nur auf Handtücher klicken, und sie können ohne Probleme oder Verwirrung direkt zu genau der Seite zurückkehren, auf der sie sein müssen Das ist letztendlich das, worum es bei UI und UX geht. Es hält alles für den Benutzer so einfach und übersichtlich wie möglich. Auch hier müssen Sie kein UI- oder UX-Experte sein , da wir die Seiten innerhalb der Vorlagen bereits so eingerichtet haben die Seiten innerhalb der Vorlagen bereits so eingerichtet , dass es für Sie ganz einfach ist. Aber der Grund, warum ich das mit Ihnen teilen möchte, ist dass Sie, wenn Sie die Website tatsächlich erstellen wollen, nach Möglichkeiten suchen müssen , den eigentlichen Prozess und Reise für die Besucher Ihrer Webseite so einfach und unkompliziert wie möglich zu gestalten. Wie dem auch sei, ich hoffe, Sie fanden diese Lektion hilfreich. Vielen Dank für Ihre Zeit und wir sehen uns in der nächsten Lektion. 6. Website-Beispiele - E-Commerce-Edition: Okay, ich bin mir sicher, dass Sie jetzt bereit sind, einige großartige Beispiele für Websites zu sehen und auch zu verstehen, warum sie so großartig sind Nun, die Websites, die ich Ihnen zeigen werde, sind für Unternehmen bestimmt, die tatsächlich E-Commerce-Produkte verkaufen. Sie verkaufen also tatsächlich Produkte online und verwenden dafür alle einen sehr ähnlichen Ansatz. Und das ist genau derselbe Ansatz, den ich Ihnen im Kurs beibringen werde. Sie verstehen also genau, wie Sie Ihr Produkt oder Ihre Marke als begehrenswert positionieren und letztendlich in der Lage sind Bedürfnisse Ihrer Kunden zu erfüllen. Die erste Marken-Website , mit der wir uns befassen werden , ist keine andere als Tesla. Wie Sie auf der Website von Tesla sehen können, beginnt es nun mit einem schönen Video des Produkts. Und Sie können sehen, dass sie das Produkt in vielen verschiedenen Umgebungen und in vielen verschiedenen Situationen präsentieren. Und der Grund, warum sie das tun, ist, um es dem Kunden zu präsentieren. Sie können dieses Produkt nahtlos in Ihr Leben integrieren. Lassen Sie uns auf der Startseite etwas weiter nach unten scrollen und sehen, was wir sonst noch finden können. Wenn wir nun ein wenig nach unten scrollen, werden Sie einige wunderschöne Fotos des Produkts sehen. Auch hier die Steigerung der Begehrlichkeit, was besonders im E-Commerce sehr wichtig ist besonders Und wenn wir weiter scrollen, können Sie mehr Modelle und mehr Angebote der Marke sehen und mehr Angebote der Marke Dies sind im Wesentlichen die verschiedenen Fahrzeuge , die Tesla derzeit anbieten kann. Und sie halten die Dinge sehr einfach, sodass Sie letztendlich das Auto finden können , das Ihrer Meinung nach am besten zu Ihren persönlichen Bedürfnissen passt, und dann darauf klicken können, um ein bisschen mehr zu erfahren. Eine Sache, die unbedingt beachtet werden muss, ist die Tatsache, dass diese Bilder von sehr hoher Qualität sind. Das ist letztendlich eine der wichtigsten Lektionen , wenn es um E-Commerce geht. Sie können buchstäblich doppelt, dreimal oder vielleicht sogar zehnmal so viel Produkt verkaufen dreimal oder vielleicht sogar zehnmal so viel Produkt indem Sie einfach sicherstellen, dass Ihre Produktfotografie perfekt ist. Fühlen Sie sich nie schlecht, wenn Sie für qualitativ hochwertige Produktfotografie bezahlen. Denn je besser Ihre Produktfotografie ist, desto begehrter wird Ihr Produkt für den Kunden sein , der sich das Produkt tatsächlich auf der Website ansieht, und das erhöht nicht nur die Kaufwahrscheinlichkeit, sondern erhöht auch die Wahrscheinlichkeit , dass er bereit ist, mehr für Ihr Produkt oder Ihre Dienstleistung zu zahlen, im Grunde genommen die Rentabilität sofort erhöht. Gehen wir ein bisschen weiter runter , um zu sehen, was wir sonst noch finden können. Nun, die Tesla-Website scheint extrem visuell fokussiert zu sein , was wiederum für E-Commerce-Websites sehr wichtig ist, aber auf den eigentlichen Seiten werden nicht viele Informationen angezeigt . Es konzentriert sich eigentlich nur auf die tatsächlichen Bilder des Produkts selbst und der Lösungen, sodass der Kunde die nächste Seite, auf der er sich befinden muss , sehr die tatsächlichen Bilder des Produkts selbst und der Lösungen, sodass der einfach finden kann Wenn wir uns zum Beispiel die verschiedenen Fahrzeuge ansehen und im Grunde mehr über das Model S erfahren möchten die verschiedenen Fahrzeuge ansehen und im Grunde mehr über das , wir auf eine Verkaufsseite weitergeleitet , auf der wir mehr über das Auto erfahren und uns letztendlich auch von seinen Funktionen und Vorteilen überzeugen können das Auto erfahren und uns letztendlich auch auf der wir mehr über das Auto erfahren und uns letztendlich auch von seinen Funktionen und Vorteilen Jetzt ist es sehr wichtig, für jedes einzelne Produkt, das Sie verkaufen, eine separate Verkaufsseite zu haben ist es sehr wichtig, für jedes einzelne Produkt, das Sie verkaufen , da Sie so wirklich tief in die Materie eintauchen können tief in die Materie eintauchen wie viel Wert und welchen Wert Ihr Produkt Ihrer Zielgruppe bieten kann. Und wie Sie sehen können, ist sie selbst auf der Verkaufsseite extrem visuell fokussiert. Tesla verkauft Ihnen derzeit also nicht wirklich die tatsächlichen Vorteile und Funktionen. Sie verkaufen dir immer noch die Sexyness des Autos. Letztlich, weil sie das wissen, kaufst du einen Test aufgrund des Designs des Autos und nicht unbedingt, weil es mehr Kofferraum hat, oder auch nicht wegen der Laufleistung oder der elektrischen Natur des Sie kaufen es, weil es eine Bewegung ist, wahrscheinlich wegen Elon Musk, um ganz ehrlich zu sein, und auch wegen der Ersparnisse, der Steuervergünstigungen, aber letztendlich, weil alt aussieht, weil die Autos im Test nicht wie jedes andere Auto auf dem Markt aussehen . Und seien wir ehrlich, dieses Auto sieht extrem sexy aus, es sieht toll aus Und das Beste daran ist, wenn Sie das Auto tatsächlich bestellen, es macht es wirklich super einfach und mühelos, beginnen Sie, das Auto auszuwählen, das Sie wollen Wenn Sie also das Auto in einer schönen, schönen roten Farbe haben möchten, können Sie die Räder wechseln und Sie können genau sehen, wie Ihr Auto in jedem einzelnen Winkel aussehen wird Sie können den Innenraum wählen, Sie können die Farbe des Innenraums ändern. Sie können das Auto buchstäblich genau so haben, wie Sie es wollen. Ich weiß, dass Sie das heutzutage mit so ziemlich jedem Autotyp machen können , solange Sie bereit sind, das Geld zu zahlen, aber so zeigt Ihnen Tesla das Auto und all die verschiedenen Vorteile in einem visuellen Format. Sie machen es dem Benutzer, also mir und Ihnen , sehr einfach zu verstehen, was sie bekommen. Und kannst du dich zum Beispiel an eine frühere Lektion erinnern, in der ich angefangen habe über mentale Kalorien und mentale Erschöpfung zu sprechen ? Denk darüber nach. Tesla hat sich buchstäblich all diese Mühe gegeben, die verbesserte Autopilot-Funktion in einem visuellen Format zu präsentieren , sodass Sie tatsächlich genau verstehen können, was die Autopilot-Funktion macht, ohne ein einziges Wort Text lesen zu müssen Dadurch wird das Auto , das Sie kaufen werden, buchstäblich auf einer Straße in Aktion angezeigt wird das Auto , das Sie kaufen werden , sodass es bereit ist, die erweiterte Autopilot-Funktion zu nutzen Wenn es also darum geht, diese spezielle Funktion und diesen Vorteil tatsächlich zu verkaufen, lesen Sie nicht nur darüber Sie sehen es tatsächlich in Echtzeit , also seien wir ehrlich. Das tun nicht viele Autofirmen. Und das macht Tesla als Marke so besonders. Sie lieben es wirklich, schöne Bilder zu verwenden , um ihr Produkt zu verkaufen Schauen wir uns also an, wie Apple die Dinge ein bisschen anders machen kann Wie Sie sehen können, ist Apple sehr in Weihnachtsstimmung , da dies im Dezember gedreht wird Es sind also nur noch ein paar Wochen bis Weihnachten, sodass Sie sehen können, dass sie der Zeit weit voraus sind. Wenn wir jetzt nach unten scrollen, können wir wieder sehen, wie das eigentliche Produkt in realen Situationen verwendet wird. Nun, ich weiß nicht, ob Sie sich erinnern können oder ob Sie das Gedächtnis eines Goldfisches haben, was ich manchmal tue, aber genau derselbe Ansatz wurde auf der Tests-Website verwendet Sie haben gezeigt, wie das Auto für den Nutzer von Vorteil sein kann, mühelos in sein Leben integrieren Und das ist ein wirklich verbreitetes Thema, das Sie auf allen E-Commerce-Websites finden werden , die tatsächlich verstehen, wie man Kunden verkauft Wenn wir jetzt wieder nach unten scrollen, werden Sie wieder wunderschöne Bilder sehen, werden Sie wieder wunderschöne Bilder sehen um die Attraktivität zu erhöhen Und ein wirklich einfaches Format im Grunde nur Links enthält, um mehr über das Produkt zu erfahren Jetzt werden wir uns später im Strukturierung Ihrer Startseite wie bei E-Commerce-Marke und all diesen Dingen Kurs mit der Strukturierung Ihrer Startseite wie bei einer E-Commerce-Marke und all diesen Dingen befassen. Sie können jedoch sehen, dass der einzige Zweck der Startseite besteht, Sie so schnell wie möglich zu den Verkaufsseiten der jeweiligen Produkte zu führen, an denen Sie den Verkaufsseiten der jeweiligen Produkte zu führen, an denen Sie interessiert sein könnten. Und Sie haben buchstäblich die beliebtesten Produkte, die Apple zu verkaufen versucht, direkt vor Ihnen. Sie haben das iPhone 15 Pro Titanium Edition. Sie haben das iPhone 15 mit einer neuen Kamera, neuen Design und einer neuen Oberfläche Das ist ein neues Wort. Ich wusste nicht einmal, dass es das gibt, aber ihr habt die Links, um es zu kaufen und auch um mehr zu erfahren , direkt zur Verkaufsseite Sie haben auch das Macbook Pro, den AP Hods Pro, die Uhr, die Karte, den Handel Sie haben buchstäblich alles, was Sie brauchen, um zu den Seiten der am häufigsten aufgerufenen Produkte zu gelangen der am häufigsten aufgerufenen Produkte Und Sie können sehen, dass jedes einzelne Produkt, egal um welches es sich handelt, makellos präsentiert wird, sodass es scharf und schön aussieht, egal welches Bild Sie betrachten Nochmals, ich möchte nur die Tatsache bekräftigen, dass Fotografie, wenn es um A-Commerce geht, von entscheidender Bedeutung ist Gehen Sie also nicht billig damit um. Stellen Sie sicher, dass Sie in Ihre Fotografie investieren. Vor allem, wenn es um eine E-Commerce-Website geht. Wenn Sie nun tatsächlich auf die Website und die Verkaufsseiten von Apple gelangen , werden die Dinge wirklich klar. Sie sehen nach den AirPods Pro, die buchstäblich eines der unsexiesten Produkte der Sie stecken sie buchstäblich einfach in Ihre Ohren, und es handelt sich im Wesentlichen um kabellose Kopfhörer. Das ist es. Apple hat diese Art, seine Produkte wirklich sexy aussehen zu lassen. Nun, diese eigentliche Animation wurde unter Verwendung vieler Animationen entwickelt. Und das ist eigentlich nicht so schwierig, solange Sie die entsprechenden Medien dafür haben. Darauf können wir später im Kurs eingehen, aber konzentrieren wir uns nur darauf, wie einfach die Apple-Verkaufsseiten sind. Sie präsentieren nie zu viele Informationen und halten die Dinge sehr einfach. Schließlich verkaufen sie buchstäblich nur Kopfhörer und halten es extrem einfach. Aber selbst wenn ich nur durch diese spezielle Seite scrolle, möchte ich sie kaufen. Dadurch sieht das Produkt begehrenswerter aus , als es unbedingt ist Und das ist tatsächlich einer der Hauptgründe, warum ich diese Kopfhörer gekauft habe, weil sie auf der Website letztendlich einfach so gut aussahen und ich in den Laden gehen musste , um sie mir selbst anzusehen. Und als ich sie mir auf die Ohren gelegt hatte, hatte ich die geräuschunterdrückende Wirkung und sie wurden mir verkauft Ich musste sie haben. Jetzt werden wir nicht die ganze Seite durchgehen. Aber wie Sie hier sehen können, konzentriert sich Apple erneut darauf , die Vorteile des Produkts visuell darzustellen, wie Sie hier und auch hier sehen können Und das ist eine sehr konsistente Sache. Und Sie werden das auf Teslas Website, Apples Website und auch auf der nächsten Website sehen Apples Website und auch auf der , die wir uns ansehen. Sie möchten die Vorteile des Produkts visuell zur Geltung bringen. Nochmals, zurück zur geistigen Erschöpfung und Verwendung der geringstmöglichen Menge an mentalen Kalorien. Wir sind uns also alle einig, dass die Website von Apple wirklich gut aussieht und sich auch so anfühlt, besonders wenn sie ein so einfaches und langweiliges Produkt verkaufen . Aber was langweilige Produkte angeht, wie langweilig können wir werden? Nun, ich dachte, wir schauen das wahrscheinlich langweiligste Produkt der Welt an, um zu sehen, wie sie dieses Produkt an ihr Tarko-Publikum verkaufen dieses Produkt an ihr Tarko-Publikum Das ist also Ring, und Ring ist im Grunde eine Video-Türklingel, mit der Sie mühelos sehen können , wer an Ihrer Tür steht, und Sie können Dinge auf Ihrem Telefon überwachen und mit Leuten sprechen Es ist ziemlich clever. Aber es ist ein ziemlich langweiliges Produkt. Also, wie verkaufen sie es? Also, lass uns reinspringen und es herausfinden. Wie Sie also auf ihrer Homepage sehen können, können Sie wieder sehen, dass ihre Homepage einfach all die verschiedenen Produkte präsentiert, die sie anbieten können, auf eine wirklich einfache und leicht zu navigierende Weise Sie können zu jedem ihrer Produkte gelangen indem Sie einfach diese Boxen verwenden Jetzt können Sie natürlich auch zur Navigationsleiste gehen, wo Sie auch hier ganz einfach zu allen Produkten gelangen. Gehen wir also zur Stickup-Cam und schauen uns an, worum es geht Okay, wie Sie sehen können, ist diese spezielle Produktseite viel konservativer als die Seiten von Apple und Tesla Nun, was Sie jedoch sehen können, ist, dass die eigentliche Produktfotografie wiederum wirklich atemberaubend ist. Es sieht unglaublich aus. Und Sie können auch die verschiedenen Farben der Produkte sehen, also haben sie sie in Weiß und Schwarz. Und Sie können auch sehen, dass das Produkt in bestimmten Situationen erneut angezeigt wird, und Sie können mehr davon sehen. Also, wenn du zum Beispiel hierher gehst, kannst du sehen, oh, da ist jemand, der vor der Haustür ziemlich auffällig aussieht vor der Haustür ziemlich auffällig Sie können von der Sicherheit Ihres Telefons aus sehen, wer sie sind , egal wo Sie sich Es sendet Ihnen automatisch dieses Bild. Also nochmal, es begrenzt die Menge an geistiger Erschöpfung, die der Nutzer aufwendet, um zu verstehen, was dieses Produkt in mein Leben bringen kann. Nun, es kann Ihnen helfen, auf Nummer sicher zu gehen, indem es Sie nicht einfach an der Tür stehen lässt, wenn jemand, der potenziell gefährlich ist, an die Tür klopft Und wieder zeigt es Ihnen weitere Vorteile, wie zum Beispiel die Möglichkeit, bestimmte Bereiche des Gartens zu überwachen Sie können es auch anpassen, sodass es wirklich einfach ist, es einzustellen und im Grunde aufzuladen. Nun, all diese kleinen Vorteile und Funktionen sind in diesem wirklich leicht verständlichen Abschnitt zusammengefasst in diesem wirklich leicht verständlichen Abschnitt Und auch hier geht es letztlich darum, den Kunden die Ermüdung zu ersparen. Denken Sie also immer darüber nach, wenn Sie eine E-Commerce-Website erstellen, denn letztendlich möchten Sie die Menge an mentalen Kalorien begrenzen , die der Benutzer verbraucht. Und wenn Sie auf der Seite weiter nach unten scrollen, können Sie echte Interaktionen und reale Situationen sehen echte Interaktionen und reale Situationen , in denen der Benutzer das Produkt verwenden könnte. Es integriert es in dein Leben. Es zeigt Ihnen, dass Sie dieses spezielle Produkt benötigen , um Sie und Ihre Familie zu schützen. Es gibt einen Grund, warum ein Mann mit seiner Frau, seinem kleinen Jungen und einem kleinen Mädchen zeigt, dass das für Familien perfekt ist, weil es Ihnen hilft, zu schützen, und es wird auch dazu beitragen Ihr Haus zu schützen, wenn Sie nicht da sind, und Sie sind tatsächlich in einem italienischen Restaurant essen mit Ihrer Familie Pizza Ring versteht wirklich hervorragend genau zu verstehen, warum Menschen dieses spezielle Produkt kaufen würden , weil sie ihre Familien schützen und sicherstellen möchten, dass sie ihr Zuhause und ihre Familie schützen. Und Sie können erneut sehen, wie sie mit dieser speziellen Animation die Vorteile und Eigenschaften des jeweiligen Produkts präsentieren mit dieser speziellen Animation die Vorteile und Eigenschaften des jeweiligen Produkts Sie zeigen, dass Sie buchstäblich das gesamte Haus überwachen können , einschließlich Ihrer Vermögenswerte Auto und Fahrzeug, indem Sie einfach in dieses spezielle Produkt investieren Hoffentlich erhalten Sie dadurch eine Vorstellung davon, wie Sie mit dem Aufbau Ihrer E-Commerce-Website umgehen können Eine Sache, die Sie tun sollten, wenn Sie sich verschiedene Websites ansehen , die sich in Ihrem Bereich befinden und die der Art von Dingen ähneln , die Sie verkaufen werden, ist letztendlich, so viel wie möglich von jeder Website zu nehmen , sie aber nicht zu kopieren. Im Grunde meine ich, versuchen Sie, von jeder Website, die Sie finden, die besten Teile zu nehmen, die Ihnen gefallen , und fügen Sie sie dann zusammen und formen Sie daraus eine neue Website , die persönlich und einzigartig für Sie und das ist , was Sie als Marke tun. Aber wie dem auch sei, dies ist nur eine Inspiration , um Ihnen den Einstieg zu erleichtern. Wir werden bald mit dem Aufbau Ihrer Website beginnen diesem Sinne sehen wir uns in der nächsten Lektion. Wir sehen uns bald. 7. Website-Beispiele – Personal Brand Edition: Wenn Sie also eine Website für eine persönliche Marke erstellen, wird sie wirklich einen anderen Ansatz verfolgen als die meisten anderen Websites da draußen Der Grund dafür ist , dass es bei persönlichen Marken und Websites nicht nur darum geht, Produkte zu verkaufen. Es geht hauptsächlich darum, Ihre E-Mail-Liste zu erstellen. Und in dieser Lektion möchte ich Ihnen einige unglaubliche Beispiele von Websites zeigen , auf denen Sie sich wirklich wohlfühlen und die Sie in eine Position bringen , in der Sie Ihre E-Mail-Adresse wirklich angeben möchten. Und ich werde Ihnen zeigen, wie insbesondere diese drei Websites wirklich intelligente Techniken einsetzen, um Ihre Daten letztendlich an Sie zu verkaufen. Lass uns zuerst mit Huberman Lab sterben. Nun, Huberman Lab, falls Sie es nicht wissen, dieser sehr gutaussehende Gentleman, das ist Andrew Huberman . Er ist Neurowissenschaftler und ein sehr beliebter Podcaster. Er war in vielen verschiedenen Podcasts wie Joe Rogan, John Peterson In Bezug auf seine spezielle Website hat er viele verschiedene Möglichkeiten, hat er viele verschiedene Möglichkeiten Ihre E-Mail-Adresse zu erfassen Aber wenn Sie hier seinen Aufruf zum Handeln sehen können, und das ist ein CTA hier, ein Aufruf zum Handeln, um Sie zum Handeln zu bewegen Okay? Wenn Sie jetzt hier auf diese spezielle Schaltfläche klicken, gelangen Sie zu diesem kleinen Pop-up. Wer wusste es? Es gibt ein kleines Video, das dir erzählt wie toll dieses Ding ist, das du brauchst, wie sehr es dein Leben beeinflussen wird . Und dann gibt es dir eine kleine Box , die du an deine E-Mail-Adresse schicken kannst. Bei Websites für persönliche Marken dreht sich alles um die Generierung von Leads Sie können also immer wieder an denselben Kunden verkaufen , um ihn als Lead Lassen Sie uns nun etwas genauer eingehen, worum es auf dieser Website geht Jetzt wird viel Vertrauen aufgebaut. Letztlich wird ihm also so viel Wert wie möglich beigemessen, um sich zu positionieren, er hat eine Autorität in diesem bestimmten Bereich. Und wenn Sie nach unten scrollen, dreht sich buchstäblich alles um seine speziellen Fachgebiete. Es geht also darum, so viel Wert wie möglich zu schaffen. Er hat einen Newsletter, wiederum nur um die Generierung von Leads geht. Er wird Ihnen Informationen schicken und sich als Autorität positionieren. Und dann, wenn die Zeit reif ist und er vielleicht ein Produkt oder etwas hat , das er Ihnen verkaufen möchte, oder vielleicht ein Sponsor, der für das, was er tut, relevant ist , Ihnen verkaufen möchte. Er kann für jeden einzelnen Verkauf, der generiert wird , eine Provision erhalten. Lassen Sie uns in seine Ereignisse eintauchen. Er verkauft zum Beispiel Veranstaltungen. Du weißt schon, er spricht. Also kann er tatsächlich Tickets für seine Veranstaltungen verkaufen und über genau das sprechen, wofür er sich als Autoritätsperson positioniert hat. So ist er zum Beispiel in Melbourne, Sydney, Sydney, wieder in Los Angeles, New York, Toronto. Also veranstaltet er diese Veranstaltungen und verkauft seine Zeit als Veranstalter , um letztendlich sein Fachwissen in diesem speziellen Umfeld weiterzugeben . Gehen wir jetzt auf die Website von Con Mari. Das ist ganz anders Das ist Marie Condo. Jetzt. Ich bin mir nicht sicher , ob du sie gesehen hast. Sie hatte eine sehr beliebte Netflix-Serie, die Marie Condo Tidy Specialist oder Tidy Mh Marie Condo oder so ähnlich hieß oder Tidy Mh Marie Condo oder so ähnlich hieß Wie auch immer. Nun, das ist im Grunde genommen nicht so, es hieß Spark with Joy oder so etwas mit Freude. Jedenfalls. Es war wirklich, wirklich gut, wirklich therapeutisch, und man konnte es sich ansehen und sich danach einfach richtig entspannt fühlen. Es war so etwas wie Meditation über solche Dinge, aber auch winzig genug. Sie können hier sehen , dass Marie Condo jetzt verschiedene Möglichkeiten hat verschiedene Möglichkeiten , Ihre E-Mail-Adresse zu erfassen. Sie hatte tatsächlich ein Pop-up, das auftauchte, als ich auf die Website kam, was wir leider verpasst haben Aber sie hat einen winzigen Kurs. Sie hat ein Geschäft. Sie hat auch einen Newsletter in ihrer Fußzeile, was so ziemlich der Standard für ziemlich alle persönlichen Marken-Websites Aber was Marie Condo ganz anders macht, ist, dass sie tatsächlich Produkte und Coaching verkauft, was wirklich einzigartig ist, besonders für jemanden im Wesentlichen eine persönliche Marke ist Sie hat sich verzweigt und eine weitere Marke, Con Marie, rund um ihre persönliche Marke gegründet Con Marie, rund um ihre persönliche Marke Bei ihrer persönlichen Marke dreht sich also alles darum aufzuräumen, aufzuräumen und organisiert zu sein Sie hat im Wesentlichen ein Coaching-Programm entwickelt um es letztendlich an Menschen zu verkaufen , die wie sie aufgeräumt werden wollen und nicht nur müde werden wollen wie sie, sondern um diese Ordnung auch anderen Menschen an ihrem allgemeinen Standort anzubieten allgemeinen Standort Sie können also buchstäblich ihr eigenes Unternehmen besitzen, was wirklich beeindruckend ist, oder? zu ihrer speziellen Website, Sie sehen, dass sie super sauber ist. Sie können sehen, dass sie einen E-Commerce-Shop hat. Sie hat viele verschiedene Produkte, was wirklich, wirklich großartig ist. Sie hat so viele verschiedene Produkte und es ist wirklich unglaublich, wie viele Produkte sie hat. Und du kannst sehen, dass all ihre, du weißt schon, Produkte und all ihre, du weißt schon, verschiedene Arten von Kleidung und Büchern. Weißt du, sie hat Desktop-Organizer. Alles dreht sich um Organisation und darum einen wirklich schönen Raum zu schaffen, der Freude macht Letztlich geht es bei ihrem gesamten Branding darum. Wenn Sie Probleme mit dem Branding haben und Ihr internes Branding noch nicht abgeschlossen haben, sich gerne unseren Kurs zum strategischen Branding ansehen , der der erste Kurs unseres Brand Builder Pro-Programms ist . Es wird alles enthalten, was Sie brauchen um wirklich zu verstehen, wie Sie eine interne Marke entwickeln können, ähnlich wie Marie Condor hier, und zu verstehen, was Ihr Markenzweck ist, Ihr Leitbild, Ihre Werte und Ihr Leitbild Alles, was wirklich dazu beiträgt dass alles auf Ihre Marke abgestimmt wird Aber wie dem auch sei, lasst uns zum dritten Beispiel zurückkehren , nämlich Ghetti Also, Ichi, falls du ihn nicht kennst, ist so etwas wie ein Mönch, ein moderner lieber Mönch, was Ich glaube, er hat für etwa sechs Monate eine Art Mönchs-Retreat besucht für etwa sechs Monate eine Art Mönchs-Retreat und dann entschieden, nein, das ist nicht wirklich gut Ich möchte irgendwie in die moderne Welt zurückkehren , aber er hat einige der Lektionen genommen , die er tatsächlich im Monks Village gelernt In Bezug auf diese spezielle Website ist sie sehr, sehr ähnlich. Nun, er hatte ein Pop-up, das aufgetaucht ist, bevor ich tatsächlich auf die Website gegangen bin, aber Sie haben es nicht geschafft, es zu sehen. Aber letztlich versucht er, so viel Glaubwürdigkeit und Autorität wie möglich zu zeigen, indem er ihn in der Ellen Show zeigt, indem er ihn in der Oper zeigt, indem er ihn in verschiedenen Filmen zeigt, indem er seine Bücher zeigt. Und wieder verkauft er im Grunde das Gericht. Er zeigt dir, okay, wenn du wie ich sein willst, kannst du ein Coach sein wie J Shelly, richtig Du kannst ein Coach sein, genau wie ich. Werde Coach und Mönch, Modern Day Monk, wenn er das so nennt Sehen Sie hier, dass es wieder nur um Autorität und Vertrauensbildung geht um Autorität und Vertrauensbildung geht Auch hier ist es sehr wichtig, Vertrauen aufzubauen. Und noch einmal, je weiter wir auf der Website weiter unten sind, können Sie letztendlich Coachings, Kurse, Bücher und den Podcast kaufen . Nun, du musst den Podcast nicht kaufen, aber du kannst dir den Podcast anhören, aber du kannst Je auch buchen, um zu sprechen. Letztlich geht es darum , so viel Glaubwürdigkeit wie möglich aufzubauen. Und wenn es darum geht, Je She letztendlich dazu zu bringen, auf Ihrer Veranstaltung zu sprechen, zeigt er letztendlich, dass er ein Experte auf diesem speziellen Gebiet ist, indem er all seine Erfahrungen präsentiert, all die verschiedenen Sendungen, in diesem speziellen Gebiet ist, indem er all seine Erfahrungen präsentiert , denen er mitgewirkt Als persönliche Marke müssen Sie das eigentlich nicht tun. Du musst nicht auf Ellen gegangen sein oder von Oprah unterstützt worden sein Aber du musst nur zeigen, dass du weißt, wovon du sprichst Das können Sie auf viele verschiedene Arten tun. Das kannst du mit einem Blog machen. Das kannst du mit Video machen. Sie können das mit wirklich informativen Inhalten tun. Sie können das tun, Sie wissen schon, indem Sie Workshops und Seminare veranstalten. All diese Dinge dienen im Wesentlichen dazu, Autorität aufzubauen. Und wenn du besser und größer wirst, dann wirst du vielleicht eines Tages Ellen oder Opera sein, weißt du, auf einer dieser wirklich großen, wiedererkennbaren Plattformen, mit denen du dich letztendlich zum Star katapultieren kannst dich letztendlich zum Star katapultieren Hören Sie mal, jede dieser Websites ist einzigartig und unterscheidet sich auf ihre Art und Weise Eines der Gemeinsamkeiten ist jedoch , dass sie sich wirklich darauf konzentrieren, Autorität in ihrem jeweiligen Bereich aufzubauen . Dies ist wichtig, wenn Sie eine Website für eine persönliche Marke erstellen möchten. Ich würde empfehlen, sich einige der Leute anzusehen , die da draußen sind bei denen Sie wirklich Anklang finden Vielleicht machen sie etwas sehr Ähnliches wie die Art von Dingen , die Sie auf der Website anbieten möchten , die Sie gerade erstellen, und gehen auf die Website und schreiben dann einfach all die Dinge auf , die Ihnen an dieser bestimmten Website wirklich gefallen , denn diese werden sich denn diese werden sich später, wenn wir Ihre Website erstellen, als sehr nützlich erweisen wenn wir Ihre Website erstellen Wie dem auch sei, ich hoffe, diese Beispiele geben Ihnen einen wirklich guten Einblick und eine Vorstellung davon , wie Sie persönlich an die Entwicklung Ihrer Website herangehen können . Später im Kurs, wenn Sie tatsächlich Ihre eigene Website erstellen, wird es sehr wichtig sein, dass Sie sich andere Websites ansehen , die Sie wirklich inspirieren. diesem Sinne kann ich es kaum erwarten, endlich mit dem Aufbau Ihrer Website zu beginnen. Lassen Sie uns in die nächste Lektion eintauchen, und wir werden sehr bald dort sein. Wir sehen uns 8. Website-Beispiele – Selling Services Edition: Wenn Sie beispielsweise versuchen, eine Dienstleistung an eine Person oder ein Unternehmen zu verkaufen , müssen Sie verstehen, wie die besten Websites der Welt dies tun, damit Sie das Gelernte grundsätzlich in Ihr eigenes Website-Design integrieren können in Ihr eigenes Website-Design Und es ist wirklich toll, einfach zu erfahren, wie die großen Leute das machen, damit Sie genau lernen können , wie Sie es angehen und das Beste daraus machen können , basierend auf den Ressourcen, die Sie haben. Und das Beste am Webflow ist, Sie buchstäblich so ziemlich alles erstellen können, was Sie wollen, solange Sie die richtigen Grundlagen haben. Darauf werden wir später im Kurs Schauen wir uns also das erste Beispiel , das wir haben, nämlich Pentagram Pentagram ist eine Designagentur, die letztendlich an vier verschiedenen Orten auf der Welt ansässig ist , darunter New York, London, Austin und Pentagram gibt es also schon eine ganze Weile und sie sind ziemlich erfolgreich Es gibt also wahrscheinlich ein paar Dinge , die wir von ihrer Website lernen können Gehen wir also zu ihrer Homepage und versuchen dann einfach zu verstehen , und versuchen dann einfach zu verstehen was sie mit ihrer Homepage zu tun versuchen. Wie Sie hier sehen können, haben sie einen Slider, der acht verschiedene Arten von Arbeiten zeigt, was im Wesentlichen zeigt, dass es sich um eine Designagentur handelt Okay? Sie versuchen nicht, dir etwas zu verkaufen. Sie sagen nur, hören Sie, das machen wir, und wenn Sie daran interessiert sind, Sie gerne mehr erfahren. Wenn wir jetzt nach unten scrollen, wird es im Grunde einfach mehr Arbeit sein. Es geht nur darum, ihre Arbeit zu präsentieren , sodass Sie letztendlich erkennen können, ob dies die Art von Arbeit oder der Stil ist , den Sie letztendlich für Ihr eigenes Unternehmen haben möchten Nun, was Sie sehen werden, ist, dass sie eigentlich gar nichts über Dienstleistungen Sie können also nichts über ihre Dienste erfahren. Sie können sich ihre Arbeit ansehen und ein bisschen mehr über die Art der Arbeit erfahren , die sie machen. Letztlich sagen sie aber nicht, ob du zum Beispiel ein Logo haben möchtest, dann klickst du hier. Es geht einfach darum, sich ihre Arbeit anzusehen, und wenn es Ihnen gefällt, nehme ich an, nehmen Sie einfach über die Kontaktleiste Kontakt mit uns und besuchen letztendlich entweder das Büro oder Sie senden ihnen eine E-Mail. Wenn man sich nun wirklich mit den Projekten in Pentagram beschäftigt , dann wird es sehr interessant, weil man ihre Expertise wirklich in den verschiedenen Projekten sehen kann , die dort interessant, weil man ihre Expertise wirklich in den verschiedenen Projekten sehen kann ihre Expertise wirklich in den verschiedenen Projekten sehen vorgestellt Das ist zum Beispiel eine Sportbekleidungsmarke namens Lens, bei der Sie im Wesentlichen sehen können, wie dynamisch das Logo ist, Sie können sehen, wie schön die Farbpalette Und im Grunde können Sie wirklich ein Gefühl dafür bekommen, mit welcher Art von Marke Sie es zu tun haben. Sie können sehen, dass sie wirklich über die verschiedenen, Sie wissen schon, Details und Details der tatsächlichen Marke nachgedacht haben, um wirklich das bestmögliche Ergebnis zu erzielen Sie können sehen, dass es visuell sehr ansprechend ist. Sie können sehen, dass sie all die verschiedenen Farben zeigen , die sie in ihrer App, auf der gesamten Website und in der Werbung verwenden , auf der gesamten Website und in der Werbung Sie zeigen viele unglaubliche Bilder, um letztendlich zu zeigen, wie großartig die Marke ist und wie großartig sie ihre Arbeit machen Wenn Sie also ein Sportbekleidungsunternehmen wären und darüber nachgedacht haben , Pentagram einzustellen wissen Sie, dass sie die Arbeit erledigen können Es ist nicht einmal eine Frage, weißt du? Das ist also das erste Beispiel ein Unternehmen, das den Service als Teil seines Geschäfts verkauft, und im Grunde zeigt es genau, was es im Grunde zeigt es genau, was tut, ohne auch Raum für Irrtümer oder Wunder zu lassen Okay, jetzt haben wir Pentagram gesehen und wir haben gesehen, wie sie die Dinge angehen Wie würde eine kleinere Behörde an die Sache herangehen? Deshalb wollte ich Ihnen eine meiner Unternehmenswebsites zeigen , nur um völlig transparent zu sein, damit Sie wissen, dass ich praktiziere, was ich predige Wenn wir also auf die Website von Clementine House gehen, können Sie es innerhalb weniger Sekunden sehen, und darauf werden wir später im Kurs noch näher eingehen Weil dies sehr wichtig sein wird, wenn Sie mit der Erstellung Ihrer Homepage beginnen Aber Sie können innerhalb der ersten Sekunden sehen , dass Sie genau wissen, warum Sie hier sind. Dies ist also ein Unternehmen, das Marken im Wesentlichen dabei hilft, die besten Namen für ihr Unternehmen zu finden basierend auf der strategischen Positionierung und vielen anderen Faktoren. Diese spezielle Website wurde nun so gestaltet, dass von der ersten Sekunde an, in der Sie auf der Website landen, Vertrauen aufgebaut wird. Sie wissen also genau, wo Sie sind, Sie wissen genau, warum Sie hier sind. Als Nächstes stellen wir einige der Logos und Namen vor, die wir im Laufe der Jahre entwickelt haben. Dies zeigt ganz einfach die genaue Arbeit, die wir tun und die Arbeit, die wir in der Vergangenheit geleistet haben wir dann tiefer gehen, zeigt es tatsächlich diesen gutaussehenden Teufel, keine Ahnung hat, wer er ist, mit einem Video, das zeigt, was wir als Unternehmen tun und was Sie im Rahmen Ihrer Reise mit uns von uns erwarten können Rahmen Ihrer Reise mit uns von uns erwarten Sie können hier sehen, dass wir die Dinge extrem einfach und leicht verdaulich halten extrem einfach und leicht verdaulich weil es für uns wirklich wichtig ist, letztendlich genau das, was wir tun, auf einfachste Weise zu vermitteln Wir haben tonnenweise verschiedene Testimonials von vielen verschiedenen Leuten, und wir haben auch unsere Preise auf unserer Website auf Nun, einige Agenturen tun das nicht. Manche Agenturen mögen es, die Dinge ganz transparent zu halten , damit sie, wissen Sie, jedem einzelnen Kunden die Gebühren in Rechnung stellen können , die sie wollen. Ich persönlich finde, dass Transparenz sehr wichtig ist. Ich habe das Gefühl, jederzeit ehrlich zu sein. Und ich finde, dass es wirklich wichtig ist, bei der Preisgestaltung transparent wirklich wichtig ist, bei der Preisgestaltung zu sein, weil sie genau zeigt , was Sie für welchen Preis bekommen, und es bedeutet auch dass jeder einzelne Kunde, der tatsächlich auf die Website kommt, genau das Gleiche bezahlt . Ganz oben haben wir auch andere Arten von Dienstleistungen, wie zum Beispiel die Entwicklung von Websites, was wir gerade lernen Aber die Benennung ist der erste Teil der Reise. Hier paaren wir die meisten unserer Kunden, und dann kommen wir irgendwann an einen Punkt, an dem wir tatsächlich mehr mit diesem bestimmten Kunden zusammenarbeiten, um ihm wirklich zu helfen, das bestmögliche Ergebnis zu erzielen. Wir haben uns meine Website angesehen. Ich möchte hier nicht zu viel Zeit verbringen , weil wir viel daraus lernen können, aber ich möchte zu einer anderen Website wechseln, die sich ein bisschen von einer Agentur unterscheidet. Ich möchte auf eine Website wechseln, die hauptsächlich im Dienste von Software steht . Ich helfe Ihnen also dabei, Websites so zu erstellen , dass es hauptsächlich um E-Commerce geht. Nun, diese spezielle Marke, Shopify, verkauft letztendlich nur die Möglichkeit, Produkte online zu verkaufen Das ist alles, was sie Ihnen im Grunde ermöglichen. Sie ermöglichen es Ihnen grundsätzlich, Ihr Produkt online über einen Online-Shop zu verkaufen . Nun, einige ihrer Vorlagen sind ziemlich restriktiv, und aus diesem Grund verwende ich im Allgemeinen Webflow, um ganz ehrlich zu sein Aber Sie können sehen, wie sie sich sofort mit dem tatsächlichen Benutzer verbinden , auf den sie abzielen möchten Also Unternehmer, Gründer, die ein Produkt verkaufen wollen Sie stellen im Grunde eine Verbindung zu ihnen her, indem sie Unternehmer präsentieren, die ehrgeizig und leidenschaftlich bei dem sind , was sie tun, das ist etwas , mit dem ein Gründer und Unternehmer immer in Verbindung treten wird Sie sehen auch sofort einen Bereich zur Vertrauensbildung. Darauf werden wir später im Kurs noch einmal zurückkommen , und es ist wirklich wichtig, dass dieser spezielle Bereich für Vertrauen hier ist. Sie werden sehen, dass dieser Vertrauensbereich auch auf meiner Website sehr wichtig ist , und er wird auch auf Ihrer Website wichtig sein, denn wenn Sie kein großes Unternehmen wie Pentagram sind , das es seit über 30 Jahren gibt, wird es sich immer lohnen, dort einen Vertrauensbereich zu haben, denn letztendlich müssen Sie ein Vertrauen zu neuen Benutzern aufbauen , die Sie kommen auf Ihre Website und haben keine Ahnung , wer Sie sind und was Sie tun Jetzt können Sie hier wieder sehen, dass sie die Dinge sehr einfach halten. Und bis auf den Wert. Es macht die Dinge nicht komplizierter, es geht darum, die mentale Erschöpfung so gering wie möglich zu halten, Ihnen kleine, mundgerechte Informationsbrocken zu geben und auch sicherzustellen, dass sie visuell zeigen, wie einfach die Bedienung der Software ist Auch hier, wenn Sie nach unten scrollen, sehen Sie immer mehr Bilder, Sie sehen Grafiken, Sie sehen Animationen, was Ihnen im Wesentlichen zeigt, dass Sie alles an jeden mit vielen verschiedenen Zahlungsmöglichkeiten verkaufen können alles an jeden mit , und es versucht im Wesentlichen, Shopify als Lösung für E-Commerce-Unternehmen zu verkaufen . Auch hier ist die Website super sauber, superminimal und die Struktur, obwohl diese Website ein bisschen kompliziert aussehen kann, sie es eigentlich nicht. Es ist eigentlich sehr, sehr einfach. Und jeder einzelne Abschnitt auf dieser Website hat einen Zweck. Es hat einen Grund für seine Existenz. Und all das werden wir im Rahmen des Kurses durchgehen . Mach dir keine Sorgen. Sie werden genau verstehen, was die einzelnen Abschnitte dieses Kurses bewirken. Sie werden verstehen, wie dann so viel wie möglich aufnehmen und lernen können, um das dann in Zukunft in Ihre eigene Website zu integrieren . Sie werden also in der Lage sein, eine Website zu haben, die genauso gut, wenn nicht sogar besser ist, als Shopify, nachdem Sie diesen Kurs besucht und alles darin gelernt Eines der wichtigsten Dinge beim Erstellen einer Website ist letztendlich, so viel wie möglich von den Websites zu lernen, so viel wie möglich von den Websites zu lernen die uns gefallen, und dann das Gelernte in unseren Entwicklungsprozess für unsere Website einfließen unseren Entwicklungsprozess für unsere Website Und wir werden Ihre Website sehr bald im Kurs erstellen. Wir werden das alles sehr , sehr bald durchgehen. Aber ich möchte nur, dass du verstehst, dass du dich nicht schlecht fühlst , wenn du bestimmte Lektionen und Dinge von bestimmten Websites nimmst, die dir gefallen, denn das ist alles Teil des Spiels. Es gehört alles dazu, zu lernen, was Sie von Ihrer Website erwarten und was Sie nicht von Ihrer Website erwarten. Und das geht nur, wenn Sie andere Leute kennenlernen, einschließlich Ihrer Konkurrenz, um letztendlich eine Website zu erstellen, von einschließlich Ihrer Konkurrenz, um letztendlich eine Website zu erstellen der Sie glauben, sie Sie und Ihre Marke am besten repräsentiert. Wie dem auch sei, ich kann es kaum erwarten , bald im Kurs mit der eigentlichen Erstellung Ihrer Website und dem Verständnis der Grundlagen des Website-Designs zu und dem Verständnis der Grundlagen des beginnen Also werde ich dich in der nächsten Lektion sehen. Bitte. 9. Deine Marke mit Website-Design ausbauen: Warum ist die Entwicklung von Websites mit objektivem Fokus wichtig? Nun, die Frage, die Sie sich vielleicht stellen, ist, was ist die Entwicklung einer Website mit objektivem Fokus? Nun, es klingt tatsächlich viel komplexer als es tatsächlich ist. Es ist wirklich einfach. Und der Grund, warum ich es einfach sage, ist, dass ich denke, dass jedes einzelne Unternehmen höchstens zwei Ziele haben sollte, die es mit seiner Website zu erreichen versucht. Lassen Sie mich Ihnen einige Beispiele für die Arten von Zielen geben, die durchschnittliche Websites da draußen verfolgen würden. Nun, natürlich hängt alles von der Art der Website ab, die Sie tatsächlich erstellen. Zum Beispiel, wenn ein Unternehmen eine E-Commerce-Marke hat und es sich zum Ziel gesetzt hat, so viele Produkte zum höchstmöglichen Preis zu verkaufen . Und wo das ihr primäres Ziel sein könnte, kann ein sekundäres Ziel darin bestehen, so viele Leads und E-Mails wie möglich zu gewinnen , weil dies dann zum ersten Ziel führt , nämlich dem Kunden später Produkte zu verkaufen. Wenn nun jemand eine persönliche Marke aufbaut und eine Website für diese persönliche Marke erstellt , dann ja, natürlich können Sie immer noch Produkte wie Bücher und digitale Produkte oder sogar Kurse oder Coachings verkaufen . Außerdem möchten Sie Ihre E-Mail-Liste so weit wie möglich erweitern . Denn je größer die E-Mail-Liste ist, desto mehr Einfluss haben Sie. Mit mehr Einfluss können Sie auch Ihre Fangemeinde vergrößern, was letztendlich zu mehr Autorität führt, was letztendlich dazu beiträgt, dass Sie Ihre persönliche Marke schneller ausbauen können. Bei einer Website mit persönlicher Marke könnte es also einfach so sein , dass sie ihre E-Mail-Liste erweitern und dadurch vielleicht einige Produkte verkaufen möchten ihre E-Mail-Liste erweitern und dadurch vielleicht . Also für eine Website, die sich auf Personal Branding konzentriert. Dies wird sich darauf konzentrieren, Ihre E-Mail-Liste so groß wie möglich zu erweitern , damit Sie ihnen später Produkte verkaufen können, und auch darauf , in der Zwischenzeit Produkte zu verkaufen. Wenn Sie dann ein Produkt oder eine Dienstleistung digital verkaufen , Ihre Hauptziele letztendlich darin bestehen , werden Ihre Hauptziele letztendlich darin bestehen , entweder das Produkt oder die Dienstleistung im Voraus zu verkaufen oder eine Art Terminvereinbarung oder eine Art von Workshop oder Seminar zu vereinbaren, damit Sie das Produkt oder die Dienstleistung letztendlich persönlich verkaufen können Produkt oder die Dienstleistung , um so viele Verkäufe wie möglich zu erzielen. In meiner Agentur für Markenentwicklung lasse ich den Kunden zum Beispiel ein paar kurze Fragen beantworten und gebe ihm dann ein Terminbuchungssystem, dem sie tatsächlich einen Anruf mit mir vereinbaren können um 15 Minuten zu chatten , um zu sehen, ob wir zueinander passen. Dies führt dann zu einem Verkaufsgespräch bei dem ich im Wesentlichen unsere Produkte und Dienstleistungen vorstellen kann , um ihnen zu helfen, die Lösung zu finden, die sie benötigen. Jetzt möchte ich mir wirklich ein paar verschiedene Websites ansehen , die Ihnen einen Einblick in die verschiedenen Ziele geben können einen Einblick in , die jede Website zu erreichen versucht, damit Sie genau verstehen, wie die Ziele für Ihre spezifische Website finden. Die Frage, die Sie sich vielleicht stellen, ist also, wie finde ich das Ziel für meine Website? Nun, ich möchte Ihnen einige Beispiele für Websites aus völlig unterschiedlichen Branchen vorstellen Websites aus völlig unterschiedlichen , damit Sie verstehen wie verschiedene Unternehmen vorgehen um ihre Ziele für ihre Website zu finden. Und sobald Sie das Ziel für Ihre Website gefunden haben und herausgefunden haben, was die Website als Job und Verantwortung für Sie tun soll, wird der Designprozess der Website dadurch wesentlich reibungsloser und einfacher. Wenn wir uns zum Beispiel die Website von Gym Shark ansehen, das E-Commerce-Unternehmen in Großbritannien, das Fitnessbekleidung und Leggings und all diese Dinge verkauft , dann können Sie feststellen, dass sie extrem direkte Sie wollen damit beginnen, die verschiedenen Personen auf ihrer Homepage entweder der Kategorie Damen oder der Kategorie der Männer zuzuordnen entweder der Kategorie Damen oder der Kategorie der Männer Sie können also hier klicken, um zum Beispiel zu Herren zu gelangen , wo wir dann zu allen Produkten gelangen, die sich auf Männer konzentrieren Es ist also ziemlich offensichtlich , was die Ziele dieses Unternehmens sind. Ziel ist es, die Besucher der Website auf relevante Seiten zu bringen , damit sie schließlich so schnell wie möglich Produkte kaufen können . Schauen wir uns ein anderes E-Commerce-Unternehmen , um diese Botschaft zu vermitteln. Wenn wir also auf die Website von Oak Monk gehen , einer wirklich coolen Marke mit Sitz in den USA, glaube ich, und sie verkaufen einige wirklich coole Produkte, dann können Sie hier sehen, dass sie sehr spezifische Produkte Wenn Sie sich nun all die verschiedenen Produkte ansehen, die sie anbieten, haben sie eine Menge verschiedener Produkte, die sie möglicherweise an ihre Kunden verkaufen können Sie haben Dinge wie Streichholzhalter, sie haben Uhren, sie haben Timer, sie haben wunderschöne Tassen, sie haben solche Puzzlespiele, die ziemlich cool aussehen, aber ich weiß nicht wirklich, was es ist, um ganz ehrlich zu sein Sie haben auch Dinge wie Tourboxen zum Beispiel und Schreibwaren, also haben sie eine wirklich große Auswahl an Produkten Aber wenn Sie zur Homepage des Unternehmens zurückkehren und sich die wichtigsten Produkte ansehen, die sie zu verkaufen versuchen, was, wie ich mir vorstellen kann, im Wesentlichen das profitabelste Produkt ist, das profitabelste Produkt ist, können Sie im Grunde sehen, dass sie versuchen, das analoge und das wöchentliche Planungskit zu verkaufen , was im Wesentlichen die beiden Produkte sind, die sie mehr als alle anderen zu vermarkten versuchen. Und als wir uns diesen speziellen Button ansehen, Ihnen aufgefallen, dass er eine völlig andere Farbe alles andere auf der Startseite? Das liegt daran, dass die Marke möchte , dass Sie sich auf diese bestimmte Schaltfläche konzentrieren und sehen, dass sie unter allem anderen auf der Seite hervorsticht. Und wenn wir auf diese Schaltfläche klicken, gelangen wir zu einer Seite, die im Wesentlichen alles enthält, was mit diesem bestimmten Produkt und dieser bestimmten Kategorie zu tun hat alles enthält, was mit diesem bestimmten Produkt und dieser bestimmten Kategorie zu tun . Das sind also nur zwei Beispiele dafür , wie E-Commerce-Unternehmen ein ganz bestimmtes Ziel verfolgen können darum geht, Nutzer dazu zu bringen, bestimmte Seiten aufzurufen und sie sogar zu bestimmten Produkten zu Wie könnte eine Marke, die beispielsweise ein digitales Produkt verkauft , jemanden dazu bringen, genau dasselbe zu tun? Nun, wenn wir auf die Hoot Suite-Website gehen, können Sie sehen, dass ihr Aufruf zum Handeln sehr klar ist. Sie möchten im Wesentlichen, dass der Benutzer eine Demo anfordert oder, was noch wichtiger ist, eine kostenlose Testversion des Dienstes erhält Jetzt haben sie viele verschiedene Optionen und Seiten, aus denen Sie wählen können, aber von all den Seiten, zu denen sie möchten, dass Sie gehen, ist die Seite „Kostenlose Testversion starten die Option, die Sie nutzen möchten Und wenn Sie dann auf diese Schaltfläche klicken, gelangen Sie zu einer Seite, auf der Sie sagen können, dass sie nur für mich bestimmt ist. Oder ich habe ein Team. Und das bedeutet im Wesentlichen , dass der Webseiten-Traffic in relevante Bereiche aufgeteilt wird, sodass sie die bestmögliche Kundenreise für diese beiden relevanten Zielgruppen schaffen können für diese beiden relevanten Und schauen wir uns ein weiteres Beispiel ein Produkt an, das einen digitalen Service verkauft , den wir alle kennen und lieben, nämlich Netflix Jetzt ist die Netflix-Startseite wirklich einfach. Jetzt können Sie entweder unterschreiben Oh, sie hat diesen großen roten Knopf , den Sie nicht übersehen können. Mit diesem können Sie im Wesentlichen Ihre E-Mail-Adresse hinzufügen, um dem Tag beizutreten und jederzeit zu kündigen. Jetzt können Sie sehen, wie einfach es für die Person ist, loszulegen, und sie sagen auch, dass es nur 99 Ti Bat pro Monat sind. Falls Sie es noch nicht bemerkt haben, ich bin gerade in Thailand und filme diesen speziellen Kurs, das sind also ungefähr 10$. Sie sagen also im Grunde, dass er nicht teuer ist und dass es so gut wie risikofrei ist, auszuprobieren, weil Sie jederzeit kündigen können. Wie Sie sehen können, hat Netflix eine sehr klare Agenda. Es möchte, dass Sie sich anmelden, damit Sie tatsächlich auf die Plattform zugreifen können , und das macht es für Sie reibungslos. Es macht die Dinge nicht zu kompliziert. Es möchte, dass Sie sich so schnell wie möglich anmelden , um auf die Plattform zu gelangen, damit Sie die Inhalte tatsächlich genießen und die Inhalte tatsächlich genießen und sich letztendlich darauf einlassen können, damit Sie ihnen jeden Monat eine wiederkehrende Gebühr zahlen Schauen wir uns nun abschließend einige Websites für persönliche Marken an, um zu sehen welche Ziele sie verfolgen. Wenn Sie also Patrick Beck David kennen, er ist ein Podcaster, Geschäftsmann, eine sehr inspirierende Person Und letztendlich verfolgt er mit seiner Website viele verschiedene Ziele . Also, diesen Kerl gibt es schon sehr lange, okay? Und er hat ein Team, das daran arbeitet, seine persönliche Marke aufzubauen. Ich persönlich würde vorschlagen, dass Sie auf Ihrer Website nicht so viele Ziele verfolgen. Bleiben Sie bei nur einem oder zwei, einem primären und einem unterstützenden oder sekundären. Der Grund dafür ist, dass Patrick Beck David ein Team von Leuten hat, die seine Website und all die verschiedenen Aspekte innerhalb der Website verwalten all die verschiedenen Aspekte innerhalb , um letztendlich diese sehr große Angebotspalette zu erstellen, die es ihm letztendlich ermöglichen wird, so viele Kontaktpunkte wie möglich mit potenziellen Kunden zu erreichen so viele Kontaktpunkte wie möglich . Aber in der Phase, in der Sie gerade mit dem Aufbau Ihrer Website beginnen, müssen Sie sich darauf konzentrieren, nur ein Hauptziel zu haben und vielleicht zwei gleichzeitig, um die Dinge in Gang zu bringen. Wenn Sie beginnen, Ihre Marke auszubauen und Ihre Website im Laufe der Zeit wirklich weiterzuentwickeln, Sie sich eine völlig neue Gelegenheit, sodass Sie letztendlich mehr an Ihre Kunden verkaufen und letztendlich mehr Ziele verfolgen können. Sie können hier sehen, dass Patrick Bec David so viele verschiedene Angebote hat. Er versucht, Ihre E-Mail-Adresse zu erfassen. Er versucht sein Buch zu verkaufen. Er versucht Coaching zu verkaufen. Er versucht, dich dazu zu bringen, seinen Podcast anzuhören. Er verfolgt so viele verschiedene Ziele, alle auf den verschiedenen Angeboten, Paketen und Lösungen basieren , die er Ihnen als Kunde anbieten kann. Schauen wir uns eine andere persönliche Marke an , um zu sehen, ob sie den gleichen Ansatz verfolgen. Jessie Isler ist tatsächlich eine der inspirierendsten Menschen, die ich kenne tatsächlich eine der inspirierendsten Menschen, die Er hat eine super ansteckende Energie und er ist einfach ein wirklich Im Grunde kommt er mir sowieso so vor. Jetzt hat er eine weitere wirklich großartige Palette von Produkten und Dienstleistungen zu bieten. Aber ihn gibt es schon sehr lange. Ich schlage noch einmal vor, sich grundsätzlich auf ein bestimmtes Produkt oder ein bestimmtes Ziel zu konzentrieren. Denn was Jesse hier letztendlich macht , ist, dass er Coaching anbietet Er verkauft einen Kalender , der wirklich cool ist und dir hilft, dein Jahr zu planen Er hat auch einen Newsletter, er hat Bücher und er hat auch Vortragsvereinbarungen. Es ist genau das gleiche Setup. Aber letztendlich läuft alles auf dasselbe hinaus. Wenn Sie all diese Dienstleistungen auf ein einziges Ziel reduzieren möchten , ist es, so viele Produkte wie möglich zu verkaufen. Wenn man über die Vortragsmodalitäten nachdenkt, sind die Bücher, der Kalender und das Coaching im Grunde die Vortragsmodalitäten nachdenkt, die Bücher, der Kalender und alles Produkte. sind alles Produkte, die Jessie potenziellen Kunden anbieten kann Ich war eigentlich noch nie auf dieser Website, aber wenn ich bis zum Ende der Websites gehe, kann ich so ziemlich garantieren, dass sie irgendeine Art von Newsletter oder Anmeldefunktion haben kann ich so ziemlich garantieren, dass sie irgendeine Art von Newsletter oder Anmeldefunktion haben wird, weil er im Grunde versuchen wird, sich anzumelden , damit Sie sich in seine E-Mail-Liste eintragen können, damit er Ihnen später irgendein Produkt oder eine Dienstleistung verkaufen kann irgendein Produkt oder eine Dienstleistung . Hoffentlich erhalten Sie dadurch einen kleinen Einblick, wie Sie persönlich das Ziel für Ihre Website finden können . Stellen Sie sicher, dass Sie dies aufschreiben und es in Ihrer Strategie für den Aufbau Ihrer Website deutlich machen . Sie möchten versuchen, ein bestimmtes Ziel und ein unterstützendes Ziel für Ihre Website zu erreichen ein bestimmtes Ziel und , unabhängig davon, welche Art von Website Sie erstellen möchten. Nehmen Sie sich also etwas Zeit, um wirklich genau zu verstehen , was die Website für Sie tun soll. Stellen Sie sich Ihre Website als digitalen Mitarbeiter vor, und Sie geben diesem Mitarbeiter nur zwei Aufgaben, damit er sehr gut abschneiden kann. Denn wenn Sie sich nur darauf konzentrieren, ihm eine Hauptverantwortung und dann eine unterstützende Verantwortung zu übertragen, können Sie sofort erkennen, was können Sie sofort erkennen, was auf der Website hinzugefügt werden muss. Es wird also nicht zu überladen. Es wird nicht, du weißt schon, überfüllt aussehen. Es wird sehr klar und präzise sein, um die eine Sache zu erreichen , die wir erreichen mussten Wie dem auch sei, ich hoffe, Sie finden diese Lektion wertvoll, und ich freue mich schon darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 10. Die 5-Sekunden-Regel: Okay, also wie gewinnt man das Vertrauen der Besucher einer Website in 5 Sekunden oder weniger Nun, ich bin mir sicher, dass Sie sich voll bewusst sind, dass die Menschen heutzutage nicht wirklich eine lange Aufmerksamkeitsspanne haben TikTok und Instagram wenn TikTok und Instagram und wir die ganze Zeit auf unseren Telefonen sind. Wir geben der Website im Grunde 3-5 Sekunden, um uns im Grunde zu sagen: Okay, du kannst mir geben, was ich brauche. Erzähl mir ein bisschen mehr. Nun, wenn wir tatsächlich zu einer neuen Website kommen und wenn Sie in Zukunft tatsächlich eine neue Website besuchen , können Sie sich Ihrer selbst bewusst sein und erkennen, dass Sie sich genau diese drei SM-Fragen in genau dieser SM-Reihenfolge stellen genau diese drei SM-Fragen in , wenn Sie genau hinschauen. Wenn wir nun auf eine brandneue Website gehen und Sie tatsächlich einen Schritt zurücktreten und darüber nachdenken, Sie tatsächlich einen Schritt zurücktreten welche Fragen Sie sich stellen, wenn Sie auf einer neuen Homepage landen , auf der Sie noch nie zuvor waren, stellen wir uns in der Regel drei spezifische Fragen in jedes Mal drei spezifische Fragen in der genauen SM-Reihenfolge. Das ist wirklich wichtig zu verstehen, denn wenn Sie eine Website erstellen und noch nie zuvor eine Website erstellt haben, können Sie verstehen, wie Sie die Aufmerksamkeit Ihrer Zielgruppe in den ersten drei bis 5 Sekunden auf sich ziehen können, sodass sie mehr Zeit auf Ihrer Website verbringen können und erkennen, dass Sie die Option für sie sein könnten , ihnen zu helfen eine Lösung für das zu finden Anforderungen, die sie benötigen. Wenn Sie also wissen, wie Sie ihre Aufmerksamkeit erregen und ihnen helfen können, ein bisschen länger auf Ihrer Website zu bleiben, können sie ein bisschen mehr über das, was Sie zu bieten haben, erfahren und Sie dann letztendlich als Lösung für das Problem auswählen , das sie haben. Wenn Sie schon einmal eine Website erstellt und sie eine wirklich hohe Absprungrate hatte, liegt das im Grunde daran , dass die Website die Aufmerksamkeit der Person nicht erregt hat oder dass sehr unklar war was sie verkauft oder anbieten kann. Auch das macht es sehr wichtig, dass Sie als jemand, der eine Website erstellt, sicherstellen müssen, dass die Leute genau wissen , was Sie tun und was Sie ihnen bieten können Der einfachste und klarste Weg, der möglich ist. Was sind also diese drei Fragen, die wir uns stellen , wenn wir auf einer brandneuen Website landen? Nun, die erste Frage ist, was machst du und wie kannst du mir helfen? Nun, das sind zwei Fragen. Bleiben wir also einfach bei dem, was Sie tun , weil das die Dinge einfach macht. Nun, was Sie tun, bedeutet im Wesentlichen, okay, ich habe ein Problem und ich denke, Sie könnten eine Lösung sein. Warum sollte ich dich wählen? Was bieten Sie mir eigentlich an? Wenn Sie sich zum Beispiel diese Website hier ansehen, können Sie feststellen, dass sie Ihnen innerhalb der ersten Sekunde , in der Sie auf der Startseite landen, buchstäblich genau sagt, was sie anbieten. Es bedeutet buchstäblich, dem Kunden zu sagen, dass wir das für Sie tun können, und deshalb sollten Sie sich für uns entscheiden. Es heißt im Wesentlichen: Hören Sie, Sie werden Ihre Zeit nicht damit verschwenden unsere Website zu besuchen, Sie sind am richtigen Ort. Okay, jetzt haben wir sie am richtigen Ort. Sie wissen, dass sie ihre Zeit nicht verschwenden werden. Die nächste Frage, die wir uns normalerweise stellen, ist Okay, ich bin am richtigen Ort. Du könntest haben, was ich brauche, aber kann ich dir vertrauen? Nun, das ist die nächste Frage , die sich jede einzelne Person gestellt hat, wenn es um eine neue Website geht. Ist diese Marke echt? Ist dieses Angebot tatsächlich echt? Werde ich ihnen mein Geld geben und werde ich zurückbekommen, was ich erwarte? Jetzt gibt es unzählige verschiedene Möglichkeiten, wie Sie Vertrauen in Ihre Website aufbauen können . Und dieser Abschnitt sollte im Wesentlichen unter den Hero-Bereich fallen, ähnlich wie in diesem Beispiel, dem Sie einfach zeigen können, dass Sie in der bestimmten Sache, die Sie anbieten, Autorität haben ? Du sagst, hör zu, ich kann dir das anbieten, was du brauchst, und ich habe das schon 1 Million Mal gemacht. Sie werden also letztlich nicht im Stich gelassen, und Sie befinden sich im Grunde in guter Gesellschaft, als ob Sie nicht die erste Person sind, die das tut, und Sie werden auch nicht die Letzte sein, die bei Okay kauft , also haben Sie jetzt tatsächlich das Vertrauen des Kunden, und er weiß genau, was Sie anbieten können. Was kommt als Nächstes? Nun, wenn wir zum ersten Mal auf eine Website kommen , was können Sie für mich tun? Dann kann ich dir vertrauen. Die nächste Frage ist, okay, erzähl mir ein bisschen mehr, was eigentlich keine Frage ist, aber du hast die Idee. Damit sie wissen, dass du ihnen anbieten kannst, was sie wollen. Sie wissen auch, dass Sie vertrauenswürdig sind. Jetzt möchten sie mehr über die Details und Vorteile erfahren , die Sie ihnen im Rahmen Ihres Angebots bieten können . Und hier können Sie genauer darauf eingehen , warum Leute bei Ihnen kaufen sollten. Was unterscheidet dich als Marke? Warum kaufen andere Kunden schon früher bei Ihnen? Und wie können Sie der Person wirklich das Ergebnis oder die Lösung bieten , nach der sie sucht? Letztlich kommt es darauf an, Vertrauen aufzubauen und dieses Vertrauen dann letztendlich auch umzusetzen. In jeder Art von Geschäft können Sie nicht wirklich verlieren, wenn Sie grundsätzlich eine Erwartung setzen und diese dann erfüllen oder übertreffen können. Um es kurz zusammenzufassen: Die erste Frage, die sich jeder einzelne Webseitenbesucher stellen wird, lautet Was tun Sie und wie können Sie mir helfen? Die zweite Frage ist, kann ich dir vertrauen? Zeigen Sie ihnen also vertrauenswürdige Elemente Ihrer Marke, um Autorität aufzubauen und zu zeigen, dass wir die sind , für die wir uns ausgeben, und dass Sie uns vertrauen können. Und die dritte Frage lautet: Okay, erzähl mir ein bisschen mehr darüber, was du für mich tun kannst, um mir bei meiner Herausforderung zu helfen. diesem Grund präsentieren Sie alle Funktionen und Vorteile auf eine Weise, die leicht zu verdauen ist Und so, meine Freunde, entwickelt man die perfekte Homepage für jedes Unternehmen Wie dem auch sei, ich hoffe, Sie fanden das hilfreich. Und wenn Sie mit dieser Struktur arbeiten, wird es Ihnen wirklich helfen, eine Website zu erstellen , die wirklich die Ergebnisse liefert, die Sie benötigen. Wie dem auch sei, wir haben jetzt viel Schwung in die nächste Lektion, also werde ich Sie dort sehen. 11. Website-Design 101: Ausrichtung und Raster: Was bedeutet Ausrichtung also wenn es um das Design von Websites geht, und wie tragen Raster dazu bei, schöne Websites zu erstellen , die wirklich ins Auge fallen Nun, die Wahrheit ist, dass Raster und Ausrichtungen dabei helfen so viel mehr zu tun, als nur schöne Websites zu erstellen Sie können Websites auch funktionaler und reaktionsschneller machen und auch dazu beitragen, die Benutzererfahrung zu verbessern Fangen wir also mit der Ausrichtung an. Was ist Alignment? Nun, Ausrichtung bezieht sich auf die Beziehung und Positionierung bestimmter Elemente auf einer gemeinsamen Achse. Wenn Elemente aufeinander abgestimmt sind, verleiht dies einer Website ein Gefühl von Struktur und Professionalität. Schön strukturierte und organisierte Webseiten tragen wirklich dazu bei, Ihrer Website ein professionelles Aussehen zu verleihen, und verbessern auch die Benutzererfahrung erheblich, indem sie Ihren Benutzern helfen , durch Ihre Website zu navigieren , ohne dabei mentale Kalorien zu verbrauchen. Nun gibt es einige wichtige Punkte, die Sie beachten wenn Sie sich auf die Ausrichtung und die Verwendung von Rastern konzentrieren. Die erste Sache ist Konsistenz. nun eine einheitliche Ausrichtung und Bewertung auf Ihrer gesamten Website verwenden , wird es äußerst wichtig sein, vorhersehbare Seiten zu erstellen , die nicht nur professionell, sondern auch für den Benutzer leicht zu verdauen sind sondern auch für den Benutzer leicht zu verdauen Dazu gehört auch, dieselben Ausrichtungen und Raster für Text, Bilder und sogar Schaltflächen zu verwenden und Raster für Text, Bilder und sogar Schaltflächen Dies wird Ihnen helfen, ein ästhetisches Gesamtgefühl zu erzielen , das wirklich professionell und vertrauenswürdig aussieht Der zweite wichtige Punkt, den Immigranten zu Alignment und Grids gehören, ist die Hierarchie Sie müssen die Hierarchie in Bezug auf Ausrichtungen und Raster verwenden , um letztendlich die wichtigsten Informationen zuerst zu präsentieren und sicherzustellen sie sauber, professionell und leicht Hier kommen Ausrichtung und Raster ins Spiel. Es sorgt für ein vorhersehbares Erlebnis auf den Seiten Ihrer Website, sodass der Benutzer weiß, wo er als Nächstes suchen muss Und der letzte wichtige Punkt, den wir in dieser Lektion einige Male angesprochen haben , ist responsives Design. Die Verwendung von Rastern ist sehr wichtig, um sicherzustellen , dass Ihre Website sowohl auf Mobilgeräten als auch auf Tablets und Desktops gut aussieht Indem Sie die Ausrichtung auf Ihrer gesamten Website und auch die Raster , die Sie zum Erstellen Ihrer Website-Seiten verwenden, einheitlich die Ausrichtung auf Ihrer gesamten Website und auch die Raster , die Sie zum Erstellen Ihrer Website-Seiten verwenden einhalten, können Sie ein nahtloses Markenerlebnis schaffen, das auf allen Geräten, auf denen der Besucher möglicherweise auf Ihrer Website surft, konsistent ist denen der Besucher möglicherweise auf Ihrer Website surft Und was ich tun möchte, ist, diese beiden Webseiten mit Ihnen zu teilen und Sie entscheiden zu lassen , welche Ihrer Meinung nach die beste Ausrichtung und das beste Rasterbild bietet . Und drei, zwei, eins. Und wenn du es nicht richtig verstanden hast, mach dir keine Sorgen, schau dir dieses Video einfach noch einmal an und ich bin mir sicher, dass du es ein zweites Mal bekommst Aber wenn Sie es richtig gemacht haben, dann herzlichen Glückwunsch, Sie kennen jetzt den Unterschied zwischen einer Website, die in Bezug auf Ausrichtung und Gliederung perfekt ist , und einer Website, die diese Prinzipien in Bezug auf ihr Design nicht verwendet Nun , da Sie Alignment und Gritting auskennen, können Sie Webseiten erstellen, die nicht nur optisch ansprechender aussehen und sich auch so anfühlen, sondern eine bessere Benutzererfahrung bieten, sodass Ihre Website Ihren Benutzern hilft, weniger mentale Kalorien zu verbrennen, sodass sie länger auf Ihrer Website bleiben können. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese Lektion und eine kleine Übung am Ende gefallen diese Lektion und eine kleine Übung am Ende Wir sehen uns in der nächsten Lektion. Wir sehen uns bald. 12. Website-Design 101: Visuelle Hierarchie: Visuelle Hierarchie und Website-Design. Was ist das und warum ist es so wichtig? Lassen Sie uns zunächst besprechen, was visuelle Hierarchie eigentlich ist. Visuelle Hierarchie ist die Anordnung oder Präsentation bestimmter Elemente, um ihre Reihenfolge ihrer Wichtigkeit zu veranschaulichen. Eine gut gestaltete Website mit visueller Hierarchie kann dazu beitragen, das Gesamterlebnis erheblich zu verbessern Es verbessert die Lesbarkeit und das Engagement und reduziert auch die Menge an mentalen Kalorien, die der Benutzer aufwenden muss, um durch Ihre Website zu navigieren und die Informationen zu konsumieren , die er verdauen muss Nun gibt es einige Schlüsselelemente, die häufiger visuelle Hierarchien verwenden , um ihre Botschaft effektiver zu vermitteln Und das erste dieser Elemente ist die Typografie. Gut gestaltete Websites, die visuelle Hierarchie verwenden , um die Benutzererfahrung wirklich zu verbessern, verwenden verschiedene Formen der Typografie, die dicker, dünner und oft in einer anderen Farbe sind , letztendlich die wichtigsten Prinzipien der visuellen Hierarchie verwendet Prinzipien der visuellen Sie können genau dieselben Informationen auf völlig unterschiedliche Weise präsentieren , von denen eine extrem lesbar ist und die andere tatsächlich mühsam zu lesen ist Ein weiteres Element, das wirklich wichtig ist, wenn es um die visuelle Hierarchie geht, ist der Farbkontrast. Sie können Farbe verwenden, um den Blick des Benutzers auf bestimmte Elemente zu lenken . Lebendigere Farben, die alle Blicke auf sich ziehen, können für Handlungsaufforderungen, wichtige Schaltflächen und sogar wichtige Informationen verwendet werden . Ein weiterer Ansatz , der mit der visuellen Hierarchie verknüpft ist , ist der Weißraum. Jetzt werden wir später im Kurs mehr über Leerraum erfahren . Aber wenn Sie sich die Verwendung von Leerraum zu eigen machen und wissen, wie man ihn richtig einsetzt, was ich Ihnen gleich beibringen werde können Sie wiederum dazu beitragen, dass bestimmte Elemente hervorstechen die visuelle Hierarchie innerhalb Ihrer Website verbessern Als kleine unterhaltsame Übung zum Abschluss der Lektion möchte ich Ihnen nur zwei Inhalte zeigen und Sie entscheiden lassen, welcher Ihrer Meinung nach die visuelle Hierarchie als Leitfaden für die Präsentation verwendet nach die visuelle Hierarchie als Leitfaden für die Präsentation Wenn Sie sich also zwischen diesen beiden Inhalten entscheiden müssen , welche sind Ihrer Meinung nach lesbarer, ansprechender und bieten mit größerer Wahrscheinlichkeit eine bessere Benutzererfahrung. Und ich gebe dir 32, eins. Hast du es richtig verstanden? Okay, also wenn Sie es nicht richtig verstanden haben, dann schauen Sie sich diese Lektion vielleicht noch einmal an und vielleicht können Sie ein bisschen mehr darüber erfahren, was es bedeutet, eine unglaubliche Website mit einer großartigen visuellen Hierarchie zu haben mit einer großartigen visuellen Hierarchie Aber wenn Sie es richtig gemacht haben, herzlichen Glückwunsch, Sie verstehen jetzt den Unterschied zwischen Inhalten, die einfach zusammengemischt und nicht wirklich durchdacht sind, und Inhalten die tatsächlich nach visueller Hierarchie und Verstand angeordnet wurden , sodass sie lesbarer, ansprechender und übersichtlicher sind. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese kleine Übung und auch der Inhalt dieser Lektion gefallen diese kleine Übung und auch der Inhalt dieser Lektion Und ich freue mich darauf, Sie in der nächsten zu sehen . Wir sehen uns. 13. Website-Design 101: Schriftarten und Typografie: Wählen Sie also die richtigen Schriftarten und Typografie für Ihre Website Wie machst du das? Und warum ist es so wichtig? Ein Fehler, den viele Leute beim Entwerfen einer Website machen, ist , dass die Wahl der richtigen Schriftart oder Typografie ausschließlich der Ästhetik dient Es geht nicht nur darum, wie die Website aussieht. Obwohl das immer noch sehr wichtig ist. Bei der Auswahl der richtigen Schriftart und Typografie geht es nun mehr darum eine visuelle Sprache zu schaffen, die dazu beitragen kann, zu kommunizieren und eine Wahrnehmung rund um Ihre Marke zu schaffen, was auch das Benutzererlebnis verbessern kann Und je nach den Schriftarten und Typografie, die Sie auf Ihrer Website verwenden, können Sie je nach Schriftart und Typografie, die Sie auf jeder Seite Ihrer Website verwenden, eine völlig andere Wahrnehmung erzeugen je nach Schriftart und Typografie, die Sie auf jeder Seite Ihrer Website verwenden, jeder Seite Ihrer Website verwenden Sie können beispielsweise eine Schrift wählen, die unterhaltsamer und verspielter ist, eine, die sehr traditionell und professionell ist, oder Sie können eine Schrift wählen, die sehr einfach und modern ist Oder eine Form, die futuristischer und kreativer ist. Eines der wichtigsten Dinge, an die sich erinnern sollten, ist, dass Sie nur eine oder zwei verschiedene Schriftarten auswählen sollten eine oder zwei verschiedene Schriftarten auswählen Sie auf Ihrer Website verwenden Sie haben zum Beispiel eine Hauptschrift, die normalerweise für Ihre Unterüberschriften und Überschriften verwendet wird, und dann eine weitere Schriftart, die für allgemeine Inhalte verwendet wird, die extrem lesbar und leicht lesbar ist Das liegt daran, dass je länger ein Text ist, desto schwieriger ist es, in der richtigen Reihenfolge zu bleiben Deshalb müssen wir sicherstellen, dass der Text sehr leicht lesbar ist, damit Ihre Benutzer lesen und sie nicht geistig Die Auswahl der richtigen Schriften kann Ihnen dabei helfen, bei Ihrem Kunden oder Kunden ein bestimmtes Gefühl hervorzurufen Ihrem Kunden oder Kunden ein bestimmtes Gefühl Und es kann auch ein gewisses Maß an Professionalität und Vertrauenswürdigkeit unter Beweis stellen ein gewisses Maß an Professionalität und , das Ihnen helfen kann, mehr Umsatz und Geschäft zu generieren Nun gibt es einige wichtige Dinge, über die Sie nachdenken sollten, wenn es darum geht, die richtigen Schriftarten oder Typografie für Ihre Marke auszuwählen die richtigen Schriftarten oder Typografie für Jetzt behandeln wir den Prozess der Auswahl der richtigen Typografie und Schriften für Ihre Website und Marke insgesamt Kurs Nummer zwei im Rahmen des Brand Builder Pro-Programms. Dieser Kurs ist unser gesamter visueller Ausdruck. Er vermittelt Ihnen buchstäblich alles, was Sie über Typografie, Schriften, Farben, das perfekte Logo, die Markensprache und all diese guten Dinge wissen müssen Typografie, Schriften, Farben, das perfekte Logo, die Markensprache und all diese guten Dinge wissen Schriften, Farben, das perfekte Logo, die Markensprache und all diese guten Dinge Jetzt befasst sich der Kurs mit so viel mehr als nur diesen speziellen Elementen Wenn Sie jedoch das Gefühl haben, dass Sie in diesen speziellen Bereichen etwas mehr Unterstützung benötigen , können Sie sich das gerne ansehen. Jetzt ist es sehr wichtig, die richtigen Schriften mit der richtigen Persönlichkeit auszuwählen. Wie ich Ihnen bereits zu Beginn der Lektion gezeigt habe, Verwendung verschiedener Schriftarten Schriftart für Überschriften und Unterüberschriften eine völlig andere Botschaft über Ihre Marke vermittelt Wenn ich Sie zum Beispiel frage, welche dieser beiden Schriftarten von einer Luxusmarke verwendet wird, dann kann ich so gut wie garantieren , dass Sie sich für diese entscheiden werden Das liegt daran, dass diese spezielle Schrift vor langer Zeit erstellt wurde. Daher hat es mehr Geschichte. Daher fühlt es sich an, als hätte es mehr Tradition, und Tradition und Geschichte sind enger mit dem Gefühl verbunden, Luxus zu sein. Ein weiterer wichtiger Punkt, an den Sie sich erinnern sollten, ist die Lesbarkeit. Es ist Orgel und wir wählen eine Schrift , die super kreativ und super einzigartig ist Aber wenn Ihr Kunde oder Kunde es nicht lesen kann, wird das ein Problem darstellen. Alles, was wir in Bezug auf Typografie und Schriften tun sollte es uns ermöglichen, die bestmögliche Benutzererfahrung zu schaffen die bestmögliche Benutzererfahrung Wenn wir also eine Schrift oder eine Form von Typografie verwenden, die sehr schwer zu lesen ist, wird das der Benutzererfahrung genommen, was wir natürlich nicht Stellen Sie also sicher, dass Ihr Guthaben leicht lesbar ist, insbesondere die Schriftart Ihres Hauptinhalts Das wird sehr wichtig sein, weil es für längere Textabschnitte verwendet wird, was Ihre Benutzer sehr leicht ermüden und im Grunde ihre Aufmerksamkeit verlieren kann . Ein letzter wichtiger Punkt, an den Sie sich erinnern sollten, ist die Inkonsistenz der Hierarchie In Bezug auf die Größe sollten Sie dieses allgemeine Verhältnis für Ihre Kopfzeile, Unterüberschrift und allgemeinen Inhalt beibehalten Unterüberschrift und allgemeinen Inhalt Jetzt müssen Sie Ihren Text natürlich je nach Gerät responsiv gestalten . Wenn ich mir beispielsweise eine Website auf meinem Computer ansehe, wird der Text nicht genau dieselbe Schriftgröße als ob ich ihn auf meinem iPhone betrachte. Obwohl sich die Größe des Textes ändert, das Verhältnis zwischen der Größe der Kopfzeile, der Unterüberschrift und dem allgemeinen Inhalt bleibt das Verhältnis zwischen der Größe der Kopfzeile, der Unterüberschrift und dem allgemeinen Inhalt gleich. Und das gibt Ihnen die Hierarchie , die Sie benötigen, um Ihren Inhalt gut lesbar zu machen. Stellen Sie jedoch sicher, dass Sie diese Hierarchie auf Ihrer gesamten Website konsistent verwenden. wird Ihnen helfen, ein einheitliches Fehlererlebnis zu schaffen , sodass Ihre Benutzer Ihre Website-Seiten bequem nutzen und Ihrer Website navigieren Als kleines Experiment möchte ich nur die Tatsache klarstellen, dass Sie in dieser Lektion wahrscheinlich etwas gelernt haben Ich möchte, dass Sie diese beiden Beispiele für Typografie nehmen und mir im Grunde sagen , welches dieser beiden besser für ein modernes Softwareunternehmen geeignet ist besser für ein modernes Softwareunternehmen geeignet Wenn Sie also der CEO eines Softwareunternehmens wären, welche dieser beiden Schrifttypen würden Sie für die Website wählen? Und drei, zwei, eins, hast du es richtig verstanden? Nein, wenn du es nicht richtig gemacht hast, ist es nicht das Ende der Welt. Schauen Sie sich diese Lektion vielleicht noch einmal an und vielleicht können Sie noch ein paar andere Dinge bevor Sie mit der Auswahl der Typografie und der Finanzierung für Ihre eigene Website beginnen der Auswahl der Typografie und der Finanzierung für Ihre eigene Ich werde dem Kurs auch einige äußerst nützliche Ressourcen hinzufügen , damit Sie tatsächlich auswählen können , welche Fonds in Ihrem speziellen Markt und Ihrer Branche am häufigsten verwendet werden Ich werde dafür sorgen, dass ich die Ressource innerhalb des Kurses hinzufüge , damit Sie sie leicht finden und ohne großen Aufwand die perfekten Fonds für Ihre Website finden können. Die Auswahl der richtigen Fonds und der richtigen Typografie für Ihre Marke ist super aufregend, zumindest für mich jedenfalls Ich finde es super lustig. Aber wie dem auch sei, wir sehen uns in der nächsten Lektion, in der die Dinge richtig Fahrt aufnehmen. Ich sehe dich dort. 14. Website-Design 101: Erstellen von Farbpaletten: Wie erstellen Sie eine großartige Farbpalette für Ihre Website? nun die richtige Farbpalette für Ihre Website verwenden, können wir Ihnen helfen, die richtige Wahrnehmung, Professionalität und Bewegungsfreiheit bei Ihren Kunden zu erzeugen die richtige Wahrnehmung, Professionalität und Bewegungsfreiheit bei Ihren Kunden , wenn sie auf Ihren Webseiten surfen. Jetzt sollte jede Marke drei verschiedene Farbtypen auf ihrer Website haben . Die erste ist eine Hintergrundfarbe, die letztendlich normalerweise weiß oder, wenn Sie wirklich experimentell sein möchten, eine superdunkle Farbe ist oder, wenn Sie wirklich experimentell sein möchten, . Jetzt sollten 99% der Marken Weiß oder ein wirklich, wirklich helles Grau als Hauptfarben für die Hintergrundfarbe ihrer Markenwebsite verwenden als Hauptfarben für . Und der Grund dafür ist, dass es für einen Menschen wirklich einfach ist, schwarzen Text auf weißem Hintergrund zu lesen , im Gegensatz zu weißem Text auf schwarzem Hintergrund. Es verbraucht einfach weniger mentale Kalorien, was wir letztendlich aus Sicht der Benutzererfahrung wollen Sicht der Benutzererfahrung Bei den anderen beiden Farbtypen handelt es sich Akzentfarben und Ihre Primärfarben Jetzt ist Ihre Primärfarbe letztendlich die Farbe , für die Sie für Ihre Marke bekannt sein möchten. Jetzt können Sie zwei Primärfarben haben, aber ich persönlich denke, es ist am besten, sich an nur eine zu halten. Jetzt behandeln wir den Prozess der Entwicklung Ihrer eigenen Farbpalette für Ihre Marke viel ausführlicher und wie Sie wirklich aus strategischer Sicht darüber nachdenken können . Der zweite Kurs des Brand Builder Pro-Programms. Aber nur um Ihnen zu helfen, wenn Sie nicht in dieses Programm investieren möchten , was absolut in Ordnung ist. Wir haben auf unserer Website ein Online-Tool, dem Sie die beste Farbpalette für Ihre Marke und Website finden können. Es heißt Color Pro Plus und Sie können es online finden. Es ist wirklich einfach und völlig kostenlos zu benutzen. Auf diese Weise können Sie eine Reihe verschiedener Farbpaletten finden , die Sie auswählen und dann für Ihre Website verwenden können, sodass Sie wissen, dass Ihre Website immer gut aussehen wird Jetzt sind Ihre Akzentfarben in Ihrer Farbpalette wirklich wichtig Der Grund dafür ist, dass es den Blick des Benutzers im Wesentlichen dahin lenkt, wo er klicken sollte. Akzentfarben werden normalerweise verwendet, um die Aufmerksamkeit der Nutzer auf sich zu ziehen und ihnen auch mitzuteilen , wo sie klicken müssen und was wichtig ist. Nun werden wir etwas später im Kurs in einer Lektion erläutern, wie Sie Ihre Farbpalette tatsächlich verwenden in einer Lektion erläutern, wie Sie Ihre Farbpalette können. Aber im Moment möchte ich Ihnen nur helfen, eine Struktur und einen Denkprozess hinter jeder Farbe in Ihrer Farbpalette für Ihre Website zu erstellen einen Denkprozess hinter , damit Sie wissen, wie Sie sie verwenden wenn Sie später Ihre Website erstellen Nun, ein paar wichtige Punkte, die Sie beachten sollten, wenn Sie darüber nachdenken, eine Farbpalette für Ihre Marke zu entwickeln , sind die Markenausrichtung Stellen Sie also sicher, dass die Farben, die Sie verwenden, für Ihre Marke und die Botschaft , die Sie vermitteln möchten, relevant sind Ihre Marke und die Botschaft , die Sie vermitteln möchten Hier ist das Color Pro Plus-Tool sehr praktisch. Bietet Ihnen eine Auswahl an wunderschön gestalteten Farbpaletten, die Sie in Sekundenschnelle auf Ihrer Website verwenden können Und es zeigt Ihnen auch, welche Arten von Emotionen und Gefühlen es bei Ihren Kunden oder potenziellen Kunden hervorrufen wird Ihren Kunden oder potenziellen Kunden Eine weitere Sache, über die Sie nachdenken sollten, sind Kontrast und Harmonie Sie müssen sicherstellen , dass Ihre Website genügend Kontrast aufweist, damit sie leicht zu lesen ist und eine gute Benutzererfahrung bietet. Sie müssen auch sicherstellen, dass Ihre Farben perfekt zusammenpassen. Jetzt gibt es viele verschiedene Methoden, um eine größere Farbpalette für Websites zu erstellen. Aber wenn Sie nicht zu viel über Farbtheorie und Farbpsychologie lernen Farbtheorie und Farbpsychologie möchten und einfach nur eine wirklich großartige Farbpalette für Ihre Website haben möchten großartige Farbpalette für Ihre Website , weil Sie sie einfach gut aussehen lassen und wirklich präsentabel und vertrauenswürdig sein Verwenden Sie das Color Pro Plus-Tool, um eine Farbpalette auszuwählen und dann herauszufinden , welche für Ihre Marke am besten geeignet Alle Farbpaletten, die im Color Pro Plus-Tool präsentiert werden , wurden von geschulten Designexperten entworfen , die wissen, wie verschiedene Farben gut zusammenpassen Sie müssen sich keine Gedanken über das Erlernen der Farbtheorie machen, oder Sie müssen lediglich die Farbpalette auswählen , die Ihrer Meinung nach am besten zu Ihrer Marke passt Überprüfen Sie die tatsächlichen Emotionen, die diese bestimmte Farbpalette vermitteln und kommunizieren wird , und probieren Sie es dann auf Ihrer Website aus und sehen Sie, wie Sie sich fühlen. Ein letzter Punkt ist nun die Konsistenz. Konsistenz ist sehr wichtig, denn wenn Sie anfangen, verschiedene Farben für verschiedene Call-to-Actions zu verwenden , führt das zu einer wirklich verwirrenden Erfahrung für den Benutzer. Konsistent bedeutet einfach, dass Sie Ihre primären Akzent - und Grundfarben auf Ihrer gesamten Website auf die gleiche Weise verwenden Ihre primären Akzent - und Grundfarben . Wenn Sie beispielsweise Ihre gesamte Website mit weißem Hintergrund und dann nur eine einzige Seite mit schwarzem Hintergrund und weißem Text hatten weißem Hintergrund und dann nur eine einzige Seite mit schwarzem Hintergrund , wird sie ein wenig seltsam aussehen und Ihren Benutzer verwirren Konsistenz ist also sehr wichtig. Und nur für ein bisschen Bewegung, ein bisschen Spaß. möchte Ihnen diese beiden Webseiten zeigen und Ihnen 3 Sekunden Zeit geben, um zu entscheiden, welche Ihrer Meinung nach Farbe am besten verwendet. Und drei, zwei, eins. Hast du es richtig verstanden? Das Design, bei dem Farbe am besten zum Einsatz kommt, folgt letztlich den Prinzipien , die Sie gerade in dieser Lektion gelernt haben. Es ist konsistent, es ist harmonisch. Es werden Farben verwendet, die wirklich gut zusammenpassen. Es hat genug Weißraum und es wird Weiß als Hintergrund verwendet, und es wird Weiß als Hintergrund verwendet um dem Rest des Inhalts auf der Seite Zeit und Raum zu geben der Seite Zeit und , zu glänzen. Das andere Design macht das jedoch nicht ganz. Es ist ziemlich schlecht gestaltet. Es geht nicht wirklich darum, Farben richtig zu verwenden, und wir werden etwas später im Kurs mehr darüber lernen , wie Sie Farben Ihrem Website-Design richtig in Ihrem Website-Design richtig verwenden können. Und in diesem Sinne werde ich Sie in der nächsten Lektion sehen . Wir sehen uns bald. 15. Website-Design 101: Verwenden deiner Farben: Jetzt haben Sie wahrscheinlich ein paar Ideen oder vielleicht nur eine Idee in Bezug auf die Markenfarbpalette , die Sie auf Ihrer Website verwenden möchten. Lassen Sie uns Ihnen nun zeigen, wie Sie es auf Ihrer Website verwenden können. Wie verwenden Sie Ihre Farbpalette auf Ihrer Website? Nun, zu diesem Zeitpunkt haben Sie entweder das Tool Color P plus verwendet und haben tatsächlich die Farbpalette für Ihre Website, oder Sie versuchen, sich zwischen mehreren zu entscheiden und sind sich nicht sicher, welche Sie wählen sollen. Am Ende dieser Lektion werden Sie wissen, wie die verschiedenen Farben in Ihrer Palette verwenden , sodass Sie ein wenig experimentieren und herausfinden können , welche Farbpalette Ihnen am besten gefällt Denken Sie jetzt daran, dass die Verwendung Ihrer Farbpalette im Grunde bedeutet , sie für jedes einzelne Element auf Ihrer Website zu verwenden , sie für jedes einzelne Element auf Ihrer Website zu Dazu gehören Text, Schaltflächen, andere Elemente, Rahmen, Linien, Ihr Logo und der Hintergrund. Vergiss niemals den Hintergrund. Wie ich bereits in der vorherigen Lektion dieses Kurses erwähnt habe , müssen Sie sicherstellen, dass Sie die verwendeten Farben und deren Verwendungsweise sehr einheitlich die verwendeten Farben verwenden. Versuchen Sie zum Beispiel nicht, zu experimentierfreudig zu sein , wenn Sie Ihre Farben verwenden , aber in dieser Lektion möchte ich Ihnen nur einige grundlegende Regeln und bewährte Methoden geben , damit Sie die Farben bestmöglich verwenden können die Farben bestmöglich , um das beste Ergebnis zu erzielen. Nun sollte Ihre Primärfarbe die dominanteste Farbe auf Ihrer Website sein. So sollten beispielsweise alle Ihre Symbole, Ihr Logo und die Überschriften auf Ihr Logo und die Überschriften auf Ihrer Website alle diese Farbe Zeigt, was die Hauptfarbe der Marke ist. Ihre Primärfarbe sollte der Hintergrundfarbe die am häufigsten verwendete Farbe auf neben der Hintergrundfarbe die am häufigsten verwendete Farbe auf Ihrer Website Wenn die von Ihnen gewählte Primärfarbe auf Ihrer Website, abgesehen von der Hintergrundfarbe, nicht die dominanteste ist , dann machen Sie etwas falsch. Die Grundregel, die ich immer verwende, ist, dass alle wichtigen Dinge die Primärfarbe sein müssen, abgesehen von einem Aufruf zum Handeln , der Akzentfarbe. Dann mache ich den Hintergrund immer weiß und ich mache alle allgemeinen Inhalte immer schwarz oder einfach nur schwarz, also ein wirklich dunkles Grau. das tun und es wirklich einfach halten, können Sie sicherstellen , dass Ihre primären Akzent- und Grundfarben alle richtig verwendet werden. Und denken Sie daran, dass Ihre Akzentfarbe so verwendet werden sollte , dass sie die Aufmerksamkeit des Benutzers auf sich zieht. Und wenn Sie dies tun und Ihre Akzentfarbe richtig verwenden, können Sie den Benutzer dazu anleiten, auf bestimmte Schaltflächen und wichtige Informationen zu klicken, auf die er tatsächlich klicken soll. Als kleine unterhaltsame Übung möchte ich Ihnen nur zwei verschiedene Beispiele für Webseiten zeigen, möchte ich Ihnen nur zwei verschiedene Beispiele für Webseiten zeigen von denen eines Farben verwendet, wobei genau die Grundlagen verwendet werden, Farben verwendet, wobei genau die Grundlagen verwendet die ich Ihnen gerade in dieser Lektion beigebracht habe, und das andere, bei dem die Dinge auf eine völlig andere Art und Weise gemacht werden. Also, welche der beiden verwendet Farbe Ihrer Meinung nach richtig? Und 321. Hast du es richtig verstanden? Wie Sie sehen können, sieht diese spezielle Website einfach viel besser aus. Es fließt einfach viel besser. Sie wissen genau , wo sie klicken und was wichtig ist und was nicht. Und es schafft eine Hierarchie und ein Erlebnis, das der Benutzer genießen kann, im Gegensatz zu dem anderen Website-Design, das die Dinge nur ein bisschen schwieriger macht. Es ist nicht wirklich einfach und ein bisschen verwirrend. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese Lektion gefällt. Ich freue mich darauf, Sie in der nächsten zu sehen. Seht euch das an. 16. Website-Design 101: Schaltflächen-Hierarchie: Button-Hierarchie, was ist das und warum ist sie so wichtig? Nun, gut aussehende Buttons zu entwerfen, kann grundsätzlich die Wahrscheinlichkeit erhöhen , dass sie angeklickt werden Es gibt einige wichtige Dinge, über die Sie nachdenken sollten, wenn Sie die Schaltflächen auf Ihrer Website entwerfen , um sie anklickbarer zu machen und den Benutzer letztendlich dazu zu bringen, das zu tun, was Sie von ihm auf Ihrer Die Schaltflächen auf Ihrer Website führen den Benutzer durch Ihre Website dorthin, wo er hin soll Sie sollen Ihrem Benutzer helfen, effektiv auf der Website zu navigieren , damit er in kürzester Zeit mit den geringsten Klicks dorthin gelangen kann, wo er sein muss kürzester Zeit mit den . also zuallererst Was ist also zuallererst die Button-Hierarchie? Nun, die Schaltflächenhierarchie ist im Wesentlichen die Anordnung oder Gestaltung von Schaltflächen, um ein großartiges visuelles Erlebnis zu schaffen und die Schaltfläche letztendlich klickbarer zu machen Wir verwenden die Schaltflächenhierarchie , um dem Benutzer zu zeigen, wo er klicken sollte Dass wir innerhalb der Website das gewünschte Ergebnis erzielen können. Auf diese Weise können wir die Schaltflächen priorisieren , auf die die Benutzer klicken sollten , damit sie zu den Seiten gelangen können , auf die sie klicken sollen Letztlich sollten gut gestaltete Schaltflächen und eine gut strukturierte Hierarchie für Ihre Schaltflächen eine gut strukturierte Hierarchie für Ihre Schaltflächen dazu beitragen, eine ansprechendere und unterhaltsamere Oberfläche für Ihre Benutzer zu schaffen für Ihre Benutzer zu Nun ein paar wichtige Punkte, die in Bezug auf die Schaltflächenhierarchie zu besprechen gilt. Der erste dieser Punkte betrifft Größe und Platzierung. Nun, je dominanter eine Schaltfläche ist, desto unwahrscheinlicher ist es, dass sie angeklickt wird Farbe wird ebenfalls in diesen Entscheidungsprozess einbezogen , aber das haben wir in der letzten Lektion behandelt. Konzentrieren wir uns also im Moment nur auf die Schaltflächen selbst Was Sie jetzt tun sollten, ist, die Schaltflächen, die für Sie persönlich und Ihre Geschäftsziele wichtiger sind, größer, offensichtlicher und markanter zu gestalten die Schaltflächen, die für Sie persönlich und Ihre Geschäftsziele wichtiger sind , größer, , wohingegen Schaltflächen, die weniger wichtig sind, letztlich etwas subtiler und etwas schwieriger zu erkennen Nun, eine Sache, die Sie sicherstellen müssen , Rob, ist, dass Sie beim Design Ihrer Tasten konsistent sind Sobald Sie Ihren Button-Stil und Ihr System bestätigt haben , sollte dieses spezielle System auf Ihrer gesamten Website verwendet werden Ihrer gesamten Website verwendet Wenn Ihre Anruf-Interaktionen beispielsweise Ihrer gesamten Startseite gleich groß sind, sollte das auch auf Ihrer gesamten Website gleich auch auf Ihrer gesamten Website Als wirklich unterhaltsame Übung möchte ich nur zwei Beispiele für Schaltflächenhierarchien vorstellen und zeigen, wie einige wirklich leicht zu verstehen und wirklich einfach anzuklicken sein können und wie andere ein bisschen verwirrend und nicht so einfach zu verstehen sein können. Welches dieser beiden ist deiner Meinung nach am leichtesten zu verstehen und auf welches klickst du eher? Ich möchte dir 3 Sekunden geben. Also drei zu eins, um es richtig zu machen? Nun, wenn Sie in dieser Lektion alles verstanden haben, sollten Sie die richtigen Schaltflächen ausgewählt haben. Aber falls nicht, machen Sie sich keine Sorgen, schauen diese Lektion einfach noch einmal an und Sie sich diese Lektion einfach noch einmal an und nehmen sie hoffentlich beim zweiten Mal wieder auf. Eine Sache, die Ihnen etwas später im Kurs zeigen wird , ist, wie Animationen mit Schaltflächen erstellen um sie wirklich zum Leben zu erwecken Es bedeutet nicht, verrückte Dinge mit Knöpfen zu machen. Es sind nur kleine, einfache professionelle Animationen, die Sie in Sekundenschnelle im Web erstellen können, und es ist wirklich einfach, Ihre Schaltflächen auf eine andere Ebene zu bringen, einen völlig anderen Standard, wo sie lebendig werden und mit dem Benutzer interagieren, um ein besseres Benutzererlebnis zu schaffen. Ich werde dir später im Kurs zeigen, wie das geht, und es ist wirklich sehr einfach, also mach dir keine Sorgen. Sie müssen nicht wissen, wie man programmiert, Sie müssen nichts über Website-Design wissen. Buchstäblich so einfach wie das Bearbeiten eines Word-Dokuments. Wie dem auch sei, ich freue mich darauf, Sie in der nächsten Lektion zu sehen, und ich hoffe wirklich, dass Ihnen der Kurs gefällt . Ich werde dich bald sehen. 17. Website-Design 101: Die Bedeutung von Bildern: Warum ist es also so wichtig, die richtigen Bilder für Ihre Website auszuwählen die richtigen Bilder für Ihre Und vor allem, wie machst du das? Nun, bevor wir uns mit dieser Lektion befassen, in der nächsten Lektion dieses Kurses bestimmte Online-Orte zeigen, werde ich Ihnen in der nächsten Lektion dieses Kurses bestimmte Online-Orte zeigen, an denen Sie lizenzfreie Bilder für Ihre Website erhalten können lizenzfreie Bilder für Ihre Website erhalten , die unglaublich aussehen Seien Sie also gespannt darauf. Aber lassen Sie uns zunächst darüber sprechen, warum Bilder auf einer Website so wichtig sind. Nun, wie wir im Kurs bereits mehrfach besprochen haben , wenn jemand auf eine Website kommt, fragt er sich als Erstes , ob das für mich ist? Kann ich alles nutzen, was diese Website anbietet? Daher kann es sehr wichtig sein, die richtigen Bilder zu verwenden , da Menschen visuelle Wesen sind. Wir sehen etwas und verstehen es viel einfacher als wenn wir etwas lesen und versuchen herauszufinden, was die Wörter tatsächlich bedeuten. Und indem wir die richtige Bildsprache verwenden, die zu dem Gesamtgefühl passt dem Gesamtgefühl , das wir mit unserer Marke vermitteln möchten, wird es den Kunden helfen herauszufinden, wer wir sind und was wir anbieten können viel einfacher herauszufinden, wer wir sind und was wir anbieten können, und letztendlich zu einer insgesamt besseren Benutzererfahrung Nun, das Wichtigste, wenn es darum geht, die Art der Bilder für die Nutzung Ihrer Website auszuwählen, welche Botschaft möchte ich vermitteln Wie möchte ich als Marke wahrgenommen werden? Möchte ich als luxuriöser angesehen werden oder muss ich als kindlicher und verspielter angesehen werden als kindlicher und verspielter Oder möchte ich als moderner angesehen werden, oder sollte ich als futuristischer oder sogar weltraumhafter angesehen werden ? Das ist jetzt der erste Schritt Sie müssen herausfinden, wie Sie wahrgenommen werden möchten, und dann Ihre Bilder darauf basierend auswählen Eine weitere Sache, die bei der Auswahl der richtigen Bilder wirklich wichtig ist , ist die Sicherstellung , dass Ihre Bilder von hoher Qualität sind Eine Sache, die ich Kunden immer sage, wenn ich daran arbeite, ihnen bei der Entwicklung ihrer Website zu helfen, wenn auf einer Website ein Bild steht, das gestapelt und nicht von hoher Qualität Wie spiegelt das Ihrer Meinung nach den Service wider, den der Kunde den der Kunde von dieser bestimmten Marke erwartet ? Es spiegelt es nicht wirklich gut wider , oder? Die richtigen Bilder auszuwählen ist also eine Sache, aber sicherzustellen, dass sie qualitativ hochwertig sind, ist eine ganz andere Stellen Sie also sicher, dass Sie das im Hinterkopf behalten, und wenn Sie jemals Zweifel haben, nehmen Sie es heraus Es gibt Unmengen verschiedener Bilder , die Sie verwenden können. Seien Sie also nicht romantisch, wenn es nur um einen geht. Es ist nicht die beste Qualität. Wenn es verpixelt ist, benutze es nicht Nun, ein paar Dinge, über die Sie nachdenken sollten, wenn Sie tatsächlich Bilder für Ihre Website auswählen, sind, dass sie für Ihre Zielgruppe und auch für das, was Sie anbieten, relevant sein müssen und auch für das, was Sie Als Menschen gehen wir viel leichter mit Menschen wie uns um, basierend auf ihrer ethnischen Zugehörigkeit, ihren Hobbys Aussehen , ihrem Geschlecht, ihrer Größe, darauf, ob sie attraktiv oder weniger attraktiv sind, oder vielen anderen Dingen. Wir nutzen also natürliche Vorteile. Wenn Sie zum Beispiel eine Yoga-Marke sind oder etwas zum Thema Yoga verkaufen, dann Ihre Website, um Menschen in den Bildern zu präsentieren , die Ihre ideale Zielgruppe sind Denn die Verwendung der Bilder, die für Ihre Zielgruppe am relevantesten sind, ist am besten und effektivsten, um Ihre Kunden davon zu überzeugen, Sie als Marke zu wählen, bei Ihre Kunden davon zu überzeugen, Sie als Marke zu der sie kaufen Eine weitere Sache, die bei der Auswahl der richtigen Bilder wirklich wichtig ist , ist ein Wenn Sie beispielsweise Schwarzweißbilder auf der gesamten Website erstellen möchten, tun Sie dies auf der gesamten Website Fangen Sie nicht an, verschiedene Bilder mit Farbe oder zum Beispiel in Grüntönen aufzurufen , das wird einfach Mist aussehen. Was Sie tun möchten, ist, dass Ihre Bilder auf Website einheitlich der gesamten Dies kann manchmal schwierig sein , wenn Sie Archivbilder verwenden Wenn Sie also Archivbilder verwenden und der Ton und die Haptik des tatsächlichen Bildes etwas anders sind der Ton und die Haptik des , können Sie diese gerne in einem der Fotoshops bearbeiten oder vielleicht jemanden von Fiber beauftragen, es für Sie zu bearbeiten um sicherzustellen, dass sie sich alle sehr einheitlich anfühlen und dass sie fast im selben Fotoshooting aufgenommen wurden fast im selben Fotoshooting aufgenommen Dies kann mit Lightroom oder Photoshop geschehen, sodass jeder, der auch nur über die grundlegendsten Kenntnisse diesen beiden Programmen verfügt, dies sehr einfach tun kann Oder wenn Sie die Dinge wirklich einfach halten möchten, machen Sie sie einfach alle schwarz-weiß und sie werden trotzdem alle einheitlich aussehen. Eine wichtige Sache, an die man sich erinnern sollte, wenn es um die Auswahl von Bildern geht, ist, dass wir als Menschen gerne sehen, wie andere Menschen Dinge tun Es gibt zum Beispiel einen Grund, warum so ziemlich jede einzelne E-Commerce-Marke das Produkt in realen Situationen zeigt Zum Beispiel können sie eine Handtasche auf vielleicht einem leeren Hintergrund zeigen , aber sie zeigen das auch auf der Schulter der Frau , die die ideale Zielgruppe für den Kunden sein soll ideale Zielgruppe für den Kunden Denken Sie also wirklich darüber nach, wenn Sie die Bilder für Ihre Marke auswählen Und natürlich werde ich Ihnen in der nächsten Lektion zeigen, warum Sie eine große Auswahl an Bildern absolut kostenlos und ohne Probleme finden können Bildern absolut kostenlos und ohne Als kleine unterhaltsame Übung wollte ich Sie fragen, welche dieser beiden Gruppen von Bildern und Bildern am besten zusammenpassen Also gebe ich dir 3 Sekunden, also drei, zwei, eins. Hast du es richtig verstanden? Wie Sie sehen können, sind diese Bilder einfach viel konsistenter. Und genau danach suchen Sie , wenn es um Ihre Website geht. Sie müssen sicherstellen, dass Sie dies berücksichtigen. Denn wenn die Leute durch Ihre Seiten scrollen und offensichtlich verschiedene Seiten besuchen, werden Sie in der Lage sein, eine Harmonie zwischen ihnen herzustellen Es wird also insgesamt zu einer besseren Benutzererfahrung führen. Wie dem auch sei, ich freue mich sehr, Ihnen in der nächsten Lektion einige unglaubliche Dinge zu zeigen , also werde ich Sie dort sehen. 18. Website-Design 101: Finde kostenlose Website-Bilder online: Wo können Sie also kostenlos unglaubliche Bilder für Ihre Website finden ? In dieser Lektion habe ich tatsächlich zwei kostenlose Optionen, die fantastisch sind und die ich ständig verwende, sowie zwei kostenpflichtige Optionen. Jetzt habe ich direkte Links zu den spezifischen Webseiten des Kurses erstellt , nur um es Ihnen zu erleichtern, jede Plattform zu finden. Jetzt ist Pixab die erste Website, die absolut kostenlos ist und auf der Sie so viele Websites abrufen können, wie Sie möchten und auf der Sie so viele Websites abrufen können, wie Sie möchten, ohne einen einzigen Cent zu bezahlen Alles, was Sie tun müssen, ist einfach nach dem gewünschten Bildtyp zu suchen und nach unten zu scrollen. Es gibt Unmengen von Bildern, Es gibt Unmengen von Bildern Ihren Suchbegriff relevant Nun, eine Sache, die ich wirklich gerne mache, ist, dass ich auf bestimmte Fotografen klicke , dass ich auf bestimmte Fotografen , deren Stil mir wirklich gefällt , weil ich dadurch normalerweise verschiedene relevante Bilder bekomme , die von demselben Fotografen mit demselben Stil stammen die von demselben Fotografen mit demselben Stil und normalerweise dasselbe zerrissene Gefühl haben. ist es also viel einfacher, konsistente Bilder für Ihre Website zu finden Weise ist es also viel einfacher, konsistente Bilder für Ihre Website zu finden. Sie können genau den gleichen Ansatz für meine zweite kostenlose Plattform verwenden, nämlich Pixels. Das funktioniert jetzt genauso wie Pixel-Bier. gibt es im Allgemeinen einige weitere Optionen Auf dieser speziellen Website gibt es im Allgemeinen einige weitere Optionen oder andere Optionen, aber es funktioniert genauso. Sie suchen also einfach nach den gewünschten Bildtypen und Bildern, und dann erhalten Sie einfach eine Auswahl dieser auf Ihrem Suchbegriff basieren. Verwenden Sie auch hier einen kleinen cleveren Trick , den ich Ihnen über die Suche nach bestimmten Fotografen erzählt habe , oder wenn Ihnen ein bestimmtes Bild gefällt, klicken Sie auf das Bild und dann sollte der Fotograf dort unten sein, und sie werden verschiedene Projekte in verschiedenen Kategorien oder Sammlungen haben , die sie gemacht haben, die die gleiche Zerrissenheit, das gleiche Gefühl und die gleiche Stimmung haben sollten . Nun, zusätzlich zu diesen beiden kostenlosen Plattformen, die dir eine große Auswahl an Bildern bieten werden . Es gibt zwei weitere Premium-Optionen, wenn Sie das Bild haben möchten, das etwas ganz Besonderes ist. Der erste ist Sugar Stop. Es funktioniert genauso wie Pixel Beer und Pixel, aber die Bilder sind nur ein bisschen hochwertiger. Und letztendlich kommt es darauf an, ob Sie der Meinung sind, dass es sich lohnt ein wenig für das Bild zu bezahlen , um ein etwas hochwertigeres Bild zu erhalten. Nun, ich persönlich habe ein paar Mal **** von Stock verwendet , einfach weil ich wirklich ein unglaubliches Bild wollte, das perfekt in meinen Heldenbereich auf einer Website passt. Manchmal lohnt es sich, ein Bild einfach zu binden , nur weil es von höherer Qualität ist und vielleicht perfekt zu Ihren Bedürfnissen passt. Aber offensichtlich liegt es ganz bei Ihnen. Ein weiterer großartiger Ort, um unglaubliche Bilder zu bekommen , ist Adoby Stock Images Nun, ich persönlich bevorzuge Shutter Stock aus irgendeinem Grund einem Derby Ich weiß nicht warum, aber es hängt alles von den Bildern ab , nach denen Sie suchen. Ich persönlich würde empfehlen, nach allen Bildern zu suchen und nur nach der Art von Bildern zu suchen, die Sie möchten, und dann im Grunde nur das Bild auszuwählen , das Ihrer Meinung nach am besten zu Ihnen passt. Natürlich gibt es keine richtige oder falsche Antwort, aber denken Sie daran, ich habe eine Ressource erstellt, mit der Sie letztendlich zu jeder dieser Plattformen auf den jeweiligen Seiten gelangen können, sodass Sie ohne weiteres nach Bildern suchen können. Ich weiß, dass diese Lektion von Sean Sweet war, aber ich musste sie mit Ihnen teilen, weil es Unmengen von Bildern gibt, die Sie verwenden können, und ich möchte, dass Sie die besten für die Website Ihrer Marke finden für die Website Ihrer Marke Wie dem auch sei, ich freue mich darauf, Sie in der nächsten Lektion zu sehen. Wir sehen uns dort. 19. Website-Design 101: Zuschneiden und Framing (Drittelregel): Was ist Zuschneiden und Einrahmen? Und was ist die Drittelregel? Nun, wenn Sie Erfahrung mit der Fotografie haben, sollten Sie die Drittelregel bereits kennen. Aber wenn Sie das Zuschneiden, die Rahmung und die Drittelregel verstehen, können Sie letztendlich Rahmung und die Drittelregel verstehen, wirklich viel mehr Charakter verleihen und aus einem Bild, das auf den ersten Blick nicht wirklich interessant war , wirklich ein fesselndes Bild erstellen aus einem Bild, das auf den ersten Blick nicht wirklich interessant war , wirklich ein fesselndes Bild ersten Blick nicht wirklich interessant war , wirklich Das ist wirklich ein Game Changer. Wenn Sie wissen, wie man das richtig macht, kann es wirklich helfen, Ihr Website-Design so schnell zu verbessern Ihr Website-Design so Denn wenn ein Bild nach der Drittelregel zugeschnitten und richtig eingerahmt wird , können Sie wirklich dazu beitragen, den Blick des Benutzers zu lenken und ein Bild zu erstellen, das wirklich Interesse wecken kann Was ist also zuallererst Zuschneiden und Einrahmen? Es geht im Grunde darum, ein Bild aufzunehmen, seine Größe und einige Teile abzuschneiden, um das Bild letztendlich interessanter zu machen Jetzt können Sie dies tun, indem Sie die Drittelregel verwenden, und die Drittelregel besagt im Wesentlichen, dass Sie das Bild in neun gleiche Teile aufteilen. Dazu fügen Sie zwei vertikale und zwei horizontale Linien direkt auf dem Bild hinzu. Jetzt müssen sie nicht immer gleich sein, aber in den meisten Fällen wird es sie geben. Heute wird die Drittelregel nicht nur im Design von Websites oder in der Fotografie verwendet, sondern auch in Filmen. Die Drittelregel hilft Ihnen dabei, Interesse an bestimmten Elementen im Bild zu wecken. Hilft dabei, Schwerpunkte zu setzen, und trägt im Wesentlichen dazu bei, dass das Bild faszinierender und fesselnder wirkt Und Sie können die Drittelregel verwenden, um dem Bild verschiedene Dimensionen und Tiefen hinzuzufügen verschiedene Dimensionen dem Bild Sie können sie auch verwenden, um mit dem visuellen Gewicht des Bildes herumzuspielen , was wirklich interessant ist. Das kann Ihnen wirklich helfen, sich von einem langweiligen zentrierten Ansatz fernzuhalten , der nicht sehr interessant anzusehen sein wird. Eine Sache, an die Sie sich erinnern sollten, ist die Konsistenz. Wenn Sie also die Drittelregel auf Ihrer gesamten Website anwenden möchten, stellen Sie einfach sicher, dass Sie dies für jedes einzelne Bild tun , um an jedem einzelnen Punkt, an dem die Leute Bilder auf Ihrer Website sehen, Faszination dem die Leute Bilder auf Ihrer Website sehen Also nur eine kleine Übung, ich weiß, dass Sie zu diesem Zeitpunkt vielleicht kein Fotograf oder, Sie wissen schon, ein Filmregisseur oder ein Webdesigner Wir versuchen zwar, das zu tun, aber ich möchte, dass Sie sich diese beiden Beispiele ansehen und mir sagen, welches Ihrer Meinung nach die Drittelregel in Bezug auf Zuschneiden und Freigeben verwendet Drittelregel in Bezug auf Zuschneiden und Freigeben Wie immer gebe ich dir 3 Sekunden. Drei. Zwei, du musst nicht zuschauen. Eins. Hast du es richtig verstanden? So wie du hier sehen kannst. Dieses besondere Bild ist einfach faszinierender. Es ist einfach interessanter und zieht dich an Aber mit diesem Bild es einfach nicht so interessant. Es ist einfach langweilig. Es scheint meine Aufmerksamkeit einfach nicht so sehr zu erregen wie das andere. Also, wenn Sie das richtig verstanden haben, dann klopfen Sie sich selbst auf die Schulter, klatschen Sie in die Hände, drehen Sie sich um, berühren Sie Ihre Zehen und treffen Sie sich mit Kaffee, um zu feiern, denn wir beginnen gleich mit der nächsten Lektion, also bis bald 20. Website-Design 101: Kontrast (und rechtliche Anforderungen in den USA): Die Bedeutung von Kontrast im Website-Design. Warum ist es wichtig und was bedeutet es überhaupt? Nun, fangen wir damit an, zu verstehen , was Kontrast eigentlich bedeutet. Nun, manche Leute denken, dass Kontrast nur eine Art visueller Trick ist , obwohl es eigentlich so viel mehr ist als das. Weil Kontrast im Website-Design Lesbarkeit beitragen kann Es kann dazu beitragen, die Benutzererfahrung zu verbessern, und es kann dem Benutzer auch helfen , viel schneller dorthin zu gelangen, wo er sein muss, indem es seinen Blick und seine Aufmerksamkeit lenkt Und das ist alles extrem wichtig, aber etwas, das noch wichtiger ist, ist die Tatsache, dass Sie, wenn Sie in den USA nicht über ein gewisses Maß an Kontrast verfügen in den USA nicht über ein gewisses Maß an Kontrast und deren Anforderungen erfüllen, mit einer hohen Geldstrafe enden können Und diese werden wie der ADA-Standard und auch die WC AG-Standards stark durchgesetzt der ADA-Standard und auch die WC AG-Standards Grundsätzlich gilt: Wenn jemand, der sehbehindert ist , den Unterschied zwischen bestimmten Elementen auf Ihrer Webseite nicht erkennen kann bestimmten Elementen auf Ihrer Webseite weil der Kontrast nicht da ist und er nicht gut genug ist, dann könnte Sie das in Schwierigkeiten bringen. Jetzt können Sie den Kontrast auf dieser Website unten überprüfen . Ich werde es auch dem Kurs hinzufügen sodass Sie es selbst ausprobieren und beim Erstellen Ihrer Website verwenden können und beim Erstellen Ihrer Website verwenden , um sicherzustellen, dass Sie rechtlich sicher sind. Jetzt haben wir das übliche legale Zeug hinter uns. Wie wäre es, wenn Sie tatsächlich Kontrast verwenden, damit Ihr Design für den Benutzer besser aussieht und sich besser anfühlt? Nun, einer der wichtigsten ist der Unterschied zwischen Text - und Hintergrundkontrast. Nun, bei allem , was ich Ihnen in diesem Kurs bisher beigebracht habe , sollten Sie für Ihre eigentliche Website einen weißen Hintergrund verwenden, und dann sollten Sie entweder schwarzen Text oder einen wirklich dunkelgrauen Text verwenden. Unter dem Gesichtspunkt des Kontrasts sollte es Ihnen also gut gehen. Der einzige Unterschied besteht darin, dass Ihre Grundfarbe oder Ihre Akzentfarben nicht ausreichend vom Weiß abheben, und dies könnte zu Problemen führen Stellen Sie sicher, dass Sie auf der Website nachschauen, die ich Ihnen vor einiger Zeit in dieser Lektion gegeben habe , damit Sie sich selbst davon überzeugen können , dass der Kontrast Ihrer Website auf dem neuesten Stand ist Eine weitere Sache, die in Bezug auf den Kontrast wirklich interessant ist , ist die visuelle Hierarchie. Website von Apple verwendet dies beispielsweise für die Navigationsleiste. Es ist im Grunde eine ansprechende Art, Kontraste zu nutzen, um mit dem Benutzer in Kontakt zu treten. Es hilft ihnen zu wissen, worauf sie klicken und wohin sie gehen. Und letztendlich trägt es nur zur Benutzererfahrung bei, wenn Sie wirklich eine fantastische Website erstellen , auf der sie stöbern können Was ich jetzt wirklich tun möchte, ist einfach die Lektion zu vermitteln, wie wichtig Kontrast ist Schauen Sie sich also diese beiden Beispiele an. Und lassen Sie mich in 3 Sekunden nicht wissen, welcher Ihrer Meinung nach den Kontrast richtig verwendet. Und 32, eins. Hast du es richtig verstanden? Wie Sie an diesem Website-Design sehen können , sieht alles gut aus. Es ist wirklich klar und ich kann alles sehen, und es ist wirklich leicht zu verdauen Auf der anderen Website ist es jedoch ein bisschen anders Es ist ein bisschen zu künstlerisch und ich kann einen Teil des Textes nicht wirklich lesen. Es ist lesbar, aber nicht wirklich so einfach wie das andere Design. Denken Sie daran , wenn es um die Gestaltung Ihrer Website geht . Halte die Dinge einfach. Ehrlich gesagt. Eines der Dinge, die ich buchstäblich jedem einzelnen Studenten, Gründer, Unternehmer und Designer, mit dem ich in den letzten zehn Jahren zusammengearbeitet habe, sage, ist, die Dinge einfach zu halten. Sie müssen das Rad nicht neu erfinden. Verwenden Sie Ihren gesunden Menschenverstand, um Schwarz mit weißem Hintergrund geht, und wählen Sie eine wirklich einzigartige Farbe für Ihre Farbpalette. Stellen Sie jedoch sicher, dass Sie die Standards in den USA einhalten, wenn Sie dort sind , denn ich möchte nicht, dass Sie in illegale Schwierigkeiten geraten Okay? Wir sehen uns in der nächsten Lektion. 21. Website-Design 101: Wiederholung und Konsistenz: Warum sind Wiederholung und Konsistenz bei der Erstellung einer schönen Website so wichtig Nun, wenn diese beiden Prinzipien zusammenkommen, hilft es, eine vorhersehbare Benutzererfahrung zu schaffen , dem Benutzer hilft, beim Surfen auf Ihrer Website weniger mentale Kalorien zu verbrauchen beim Surfen auf Ihrer Website weniger mentale Kalorien , und sorgt eine insgesamt bessere Benutzererfahrung Es geht nicht nur darum, alles zu duplizieren und alles gleich zu machen Darum geht es nicht. Es geht darum, bestimmte Systeme auf Ihrer Website zu haben und zu gestalten, dass es sich wie ein langes, nahtloses Erlebnis anfühlt, wenn die Person durch Ihre Website scrollt es sich wie ein langes, nahtloses Erlebnis anfühlt Und das ist nicht kompliziert. Letztlich geht es nur darum, sicherzustellen, dass Ihre Farben , Schriften, Bilder und andere Elemente einen einheitlichen Ton haben und dass sich der Stil jedes dieser Elemente auf der gesamten Website wiederholt auf der gesamten Website Dies kann dazu beitragen, ein Erlebnis zu schaffen , mit dem sich der Benutzer vertraut machen kann Und indem Sie Wiederholungen und Konsistenz auf jeder einzelnen Seite Ihrer Website verwenden, kann dies auch dazu beitragen, dass Ihre Marke professioneller und damit vertrauenswürdiger wirkt Dazu gehören aber auch Dinge wie Schaltflächen und der Abstand zwischen den Buchstaben in Ihrem Text sowie der Abstand zwischen der Überschrift und dem Inhalt Viele verschiedene Elemente , die Sie im Wesentlichen zusammenführen können , um Ihr gesamtes Website-Erlebnis zu gestalten. Wie können Sie also sicherstellen, dass Ihre gesamte Website konsistent ist und Sie Wiederholungen auf eine Weise verwenden, die nicht langweilig, sondern ansprechend und vertrauensbildend ist? Nun, denk mal so darüber nach. All deine grundlegenden Dinge müssen gleich sein. Aber Sie können sich auf unterschiedliche Weise ausdrücken , um Ihrem Benutzer ein ansprechendes Erlebnis zu bieten? Blogbeiträgen können Sie den Aufruf zum Handeln beispielsweise an derselben Stelle platzieren. Dadurch wird sichergestellt, dass der Benutzer, wenn verschiedene Blogbeiträge liest und versucht, sich weiterzubilden, jederzeit weiß, wo sich der Aufruf zum Handeln befinden wird Die Inkonsistenz von Petitionen ist auch besonders bei E-Commerce-Websites sehr wichtig Denken Sie an die Produktseiten und , dass sich die verschiedenen Produktseiten letztendlich alle unterscheiden, weil es sich um ein anderes Produkt handelt, die tatsächlichen Bilder, die auf dem Produkt gezeigt werden, sich jedoch sehr ähnlich sind Sie haben die gleichen Winkel, den gleichen Stil, vielleicht den gleichen farbigen Hintergrund Alles zusammen sorgt für Wiederholbarkeit und Konsistenz und lässt gleichzeitig jedes Produkt auf seine eigene Weise erstrahlen Eine weitere Sache, die nicht ganz visuell ist, aber eher mit der tatsächlichen Benutzererfahrung zu tun hat, besteht darin , sicherzustellen, dass auch die Funktionalität jeder Seite konsistent ist beispielsweise Wenn Ihre Navigationsleiste jedes Mal eine andere Farbe hat, wechselt sie zu einer anderen Seite, sie wird nicht wirklich gut aussehen. Sie also daran, dass Konsistenz und Wiederholung nicht langweilig Es ist tatsächlich etwas , das Ihr Benutzer braucht. Sie müssen sich mit Ihrer Website vertraut fühlen , damit sie sie so nutzen können, sie sie am effektivsten um in kürzester Zeit und mit der geringsten Anzahl von Klicks dorthin zu gelangen, wo sie hin müssen kürzester Zeit und mit der . nun, nur zum Spaß, Schauen wir uns nun, nur zum Spaß, diese beiden Beispiele an und sagen Sie mir, welches dieser beiden die Theorie und Praxis der Wiederholung und Konsistenz nutzt der Wiederholung und Konsistenz um eine bessere Gesamtdatei zu erstellen, die sich dem Benutzer vertrauter anfühlt. Okay, ich gebe dir 3 Sekunden, also drei, zwei, eins Hast du es richtig verstanden? Wenn du es nicht richtig gemacht hast, mach dir keine Sorgen. Wir werden im Laufe des Kurses noch viel mehr Beispiele lernen und sehen . Und Konsistenz und Wiederholung werden sich sehr deutlich zeigen, wenn wir später unsere Website erstellen Aber wenn Sie es richtig gemacht haben, herzlichen Glückwunsch, Schulterklopfen und noch einen Kaffee für Sie Und wenn du keinen Kaffee magst, dann weiß ich es nicht. Ich weiß nicht, was ich dir sagen soll. Wie dem auch sei, wir sehen uns in der nächsten Lektion des Kurses? Ich kann es kaum erwarten, das zu sehen. 22. Website-Design 101: Überlappung: Okay, was bedeutet Überschneidung im Webdesign? Nun, Überschneidungen sind eine ziemlich unkonventionelle Art, Ihre Website zu entwickeln, da es normalerweise nur darum geht , Dinge zu erstellen, die sehr strukturiert Aber Überlappungen können für ein wenig visuelle Faszination sorgen und die Dinge können auch ein bisschen kreativer aussehen und sich auch so anfühlen Durch die Verwendung von Überlappungen können Sie den Benutzer wirklich auf sich ziehen und Sie können diese Aufmerksamkeit wirklich auf sich Wie nutzen Sie also Überlappungen auf Ihrer Website richtig Nun, Sie können viele verschiedene Methoden verwenden, aber letztendlich besteht die Hauptregel darin, die Regel der Verwendung von Rastern zu brechen und zwei Elemente zu überlappen, sodass sie eine faszinierende Tiefe erzeugen faszinierende Tiefe Was Sie mit Überlappungen eigentlich machen, ist, dass Sie zulassen, dass ein Element seine Grenzen überschreitet. Und wenn wir äußere Grenzen durchbrechen, werden unsere Augen sofort darauf gelenkt, weil es letztlich nicht dort sein sollte, wo es ist Es geht tatsächlich über die Grenze eines anderen Elements, wodurch die Seite ein bisschen unaufgeräumt aussieht, aber wenn es richtig gemacht ist, kann es wirklich gut Nun, ein paar Dinge, über die Sie nachdenken sollten, falls Sie sich fragen, ob sich Überschneidungen für Ihre spezielle Website lohnen werden für Ihre spezielle Website lohnen Das Erste ist, dass es wirklich ein schönes, modernes Gefühl vermitteln kann. Traditionelle Websites benötigen möglicherweise keinen überlappenden Ansatz, aber wenn Sie möchten, dass sie als ein bisschen anders, ein bisschen innovativ und ein bisschen neu und modern angesehen bisschen anders, ein bisschen innovativ und ein bisschen werden, dann könnte Überlappung ein großartiger Ansatz für Sie sein Eine wirklich gute Möglichkeit, über Überlappungen nachzudenken, besteht darin, sie wie Ebenen zu verwenden Sie haben zum Beispiel Grundfarbe Ihrer Website, die die erste Ebene ist, dann haben Sie die sekundäre Ebene, die das erste Element ist, die das erste Element ist, und dann sollte die oberste Ebene das andere Element sein, das sich offensichtlich über dem ersten Element überlappt Jetzt sollte das oberste Element, das sich überlappt, etwas kleiner sein, da Sie in der Lage sein sollten , die Basis der Website, die erste Ebene und die zweite Ebene gleichzeitig zu sehen die erste Ebene und die zweite Ebene gleichzeitig zu sehen Es sollte sich nicht zu sehr überlappen , denn dann wird dadurch letztendlich das erste Element ausgeblendet und der gesamten Praxis der Überlappung von vornherein völlig widersprochen Überlappung von vornherein Eine weitere Sache, über die Sie nachdenken sollten, ist, Überlappung in Maßen zu verwenden, weil dadurch der Blick auf die Überlappung gelenkt wird, und das liegt daran, dass Sie die Aufmerksamkeit auf das überlappende Element lenken können , aber nicht wirklich zu oft verwenden möchten , weil es sonst seine Neuheit verlieren wird Und Benutzer, Sie werden es mit der Zeit als etwas nervig empfinden Der beste Ort, an dem ich es gerne benutze, ist in der Heldenabteilung. Ich lenke wirklich die Aufmerksamkeit der Leute, es bringt sie rein. Dann haben Sie ihre Aufmerksamkeit, sodass sie durch den Rest Ihrer Website scrollen können . Denken Sie auch daran, dass Sie Überlappungen verwenden können, um bestimmte Aspekte einer Website hervorzuheben, wie zum Beispiel Ihren Aufruf zum Handeln Denn denken Sie daran, dass Sie Überlappungen verwenden, um die Aufmerksamkeit der Nutzer auf dieses bestimmte Element zu lenken Nutzen Sie es zu Ihrem Vorteil, setzen Sie es strategisch ein. Jetzt wollte ich Ihnen zwei Beispiele zeigen. Nur ein bisschen Spaß, nur um zu sehen, ob Sie Überlappungen erkennen können richtig gemacht wurden, und Überlappungen gut gemacht wurden, nicht so Welches sind diese beiden Beispiele deiner Meinung nach am besten? Welches verwendet Ihrer Meinung nach Überlappung richtig Drei, zwei, eins. Das ist der eine. Hast du es richtig verstanden? Wenn du es nicht richtig gemacht hast, mach dir keine Sorgen. Überschneidungen sind nicht jedermanns Sache. Und außerdem werden wir später im Kurs etwas mehr behandeln , sodass Sie es dann nachholen können Aber wenn Sie es richtig gemacht haben, gut gemacht, klopfen Sie auf die Schulter, und wir sehen uns in der nächsten Lektion. Wir sehen uns später. 23. Website-Design 101: Weißer Raum: Weißraum im Website-Design. Wie wichtig ist es? Was ist es? Und wie können wir damit wunderschöne Websites erstellen? Nun, wie ich schon zu Beginn des Kurses sagte, denke ich persönlich, dass 99% der Websites entweder einen weißen Hintergrund haben sollten oder einen wirklich, wirklich, wirklich beruflichen Hintergrund haben sollten. Und dafür gibt es einen Grund, weil die Leute Weiß mögen. Vor allem ich. Ich liebe Weiß. Der Grund, warum wir Weiß mögen, ist, dass es die Elemente auf der Website atmen lässt. Heute kann Weißraum viele verschiedene Dinge genannt werden. Es gibt Mikro-Weißraum, es gibt Makro-Weißraum , auf den ich etwas später eingehen werde, aber er wird auch als Negativraum bezeichnet, der sich auch gewissermaßen an das Logodesign anlehnt, wenn Sie ein Logo-Designer sind. Es gibt einige Dinge, die unbedingt beachten sollten, wenn Sie Leerraum in Ihrem Website-Design verwenden , um wirklich die besten Ergebnisse zu erzielen. Was ist nun in erster Linie Leerraum ? Nun, Weißraum ist der absichtlich verlassene Raum , auf dem nichts steht. Es ist komplett leer. Der weiße Bereich gibt im Wesentlichen dem gesamten Inhalt und den Elementen auf Ihrer Website Raum zum Atmen. Und ohne diesen Raum zum Atmen kann sich Ihre Website ziemlich eingeschränkt und ziemlich voll anfühlen, und wir möchten nicht, dass die Website wirklich überlastet aussieht. Wir möchten, dass es ein bisschen moderner luftiger ist, damit sich die Person wohl fühlt , wenn sie langsam durch Ihre Website kriecht und mehr über Sie herausfindet Jetzt kann Leerraum wirklich dazu beitragen, ein wirklich übersichtliches Design zu kreieren . Und das ist der Schlüssel. Sie möchten, dass Ihre Inhalte für Ihre Benutzer gut lesbar sind, damit sie letztendlich das bestmögliche Erlebnis haben und alle Informationen konsumieren können , die Sie verarbeiten müssen. Dies führt letztendlich zu einem ästhetisch ansprechenderen Design. Wenn Sie jetzt keinen Leerraum verwenden, riskieren Sie letztendlich, die Seiten Ihrer Website zu überlasten und letztendlich die Leute davon abzuhalten , zu viel Zeit damit zu verbringen, zu viel Zeit damit zu verbringen sehen, dass Apple beim Entwerfen ihrer Websites tonnenweise Leerraum verwendet beim Entwerfen ihrer Websites tonnenweise Leerraum Und Sie wären überrascht, wie schön ein einfacher Text mit einem schönen Bild und viel Leerraum Ihre Website wirklich zum Leben erwecken kann In Bezug auf das Design von Websites ist manchmal weniger mehr. Eine Menge Leerraum kann also wirklich dazu beitragen, dieses wunderschöne Erlebnis zu schaffen das sich Ihre Benutzer freuen können. Was ist nun der Unterschied zwischen Makro- und Mikro-Weißraum? Weil das wirklich wichtig ist. Nun, Mikro-Weißraum ist das Größere, wie zum Beispiel Ihr Hintergrund, wie der Abstand und der Rand zwischen Ihrer Überschrift und dem Inhalt, zum Beispiel der Abstand zwischen dem Inhalt auf Ihrer Website, der Text, und dann auch die Bilder, die Sie daneben haben, vielleicht, wie der Abstand zwischen der Schaltfläche und dem unteren Rand eines Textes darüber wohingegen Mikro-Weißraum ein bisschen anders ist. Das sind Dinge wie der Abstand zwischen dem Text auf Ihrer Website, nur um ihm ein wenig Luft zum Atmen zu geben, oder vielleicht sogar der vergrößerte Leerraum zwischen dem Text auf einer Schaltfläche, um ihm etwas mehr Luft zu geben und ihn hervorzuheben. Nun, es ist ein kleines Experiment. Schauen wir uns zwei verschiedene Websites an, eine, die Leerraum richtig verwendet, und eine, die Leerraum auf der rechten Seite nicht ganz verwendet. Welche dieser beiden verwendet Ihrer Meinung nach Leerraum am besten? Ich gebe dir ein bisschen Zeit. Drei, zwei, eins. Hast du es richtig verstanden? Wie Sie sehen, kann die richtige Verwendung von Leerraum Ihnen wirklich dabei helfen Ihren Benutzern ein unglaubliches Erlebnis zu bieten. Aber wenn Sie es nicht richtig verwenden und Ihre Website nur ein bisschen überladen und nicht wirklich richtig organisiert ist, können Sie sich auch negativ auswirken Nehmen Sie sich also etwas Zeit, treten Sie einen Schritt zurück und denken Sie immer daran, dass Sie bei der Gestaltung Ihrer Website immer etwas hinzufügen und mitnehmen und experimentieren Wie dem auch sei, ich hoffe, dass Sie diese Lektion in den Beispielen hilfreich finden . Deshalb freue ich mich darauf, Sie später im Kurs zu sehen . Wir sehen uns dann. 24. Strategisches Website-Design: Definiere deine Ziele: Wie finden Sie das strategische Ziel für Ihre Website? Nun, in dieser Lektion werden wir lernen, wie Sie die Ziele für Ihre Website finden können, sodass Sie sicherstellen können, dass Ihre Website jeden Tag hart für Sie arbeitet , rund um die Uhr, sieben Tage die Woche an 365 Tagen im Jahr. Die Art und Weise, wie ich über eine Website denke , ist wie bei einem digitalen Mitarbeiter. Meine Website arbeitet also hart daran, Webseiten-Traffic in zahlende Kunden umzuwandeln. Alles, was ich tun muss, ist ein kurzes Verkaufsgespräch mit ihnen zu führen und sie über die Ziellinie zu bringen. Jetzt ist natürlich jedes Unternehmen einzigartig und auf seine Art etwas anders. Die Ziele , die die Websites für diese Unternehmen erreichen müssen, sind jedoch sehr ähnlich. Wie finden Sie persönlich die besten Ziele, die Ihre Website für Ihr Unternehmen erreichen muss? Als Erstes möchte ich sagen, dass es zwar einige Websites gibt, die versuchen, viele Ziele gleichzeitig zu erreichen. Dies ist jedoch das erste Mal, dass Sie eine Website erstellen, Sie sich entweder auf nur ein Ziel oder auf ein Hauptziel und ein unterstützendes Ziel konzentrieren sollten entweder auf nur ein Ziel oder auf ein Hauptziel . Tun wir das nicht, wenn das noch keinen Sinn ergibt. Wir werden in dieser Lektion etwas tiefer eintauchen. Der Grund, warum ich es für wichtig halte, mich nur auf ein oder zwei Ziele zu konzentrieren ein oder , ist, die Dinge einfach zu halten. Das liegt daran, dass ein Benutzer, der auf Ihre Website kommt, das Letzte, was wir wollen, darin besteht , dass er verwirrt wird. Und ich werde Ihnen etwas später in dieser Lektion einige Beispiele für Websites zeigen etwas später in dieser Lektion einige , die den Eins-und-Zwei-Objektiv-Ansatz verwenden. Ich schlage vor , dass jeder ihn verwendet, wenn er zum ersten Mal eine Website für sein Unternehmen erstellt. Wenn Sie nun eine Website für eine E-Commerce-Marke erstellen, dann sind die Ziele , die Sie haben sollten , ziemlich einfach. Das erste Ziel sollte ziemlich selbsterklärend sein, nämlich Verkäufe zu generieren Alles, was Ihre Website betrifft, sollte sich also darauf konzentrieren so viele Verkäufe wie möglich zu generieren Wir werden uns mit einigen speziellen Methoden wie Upselling, Cross-Selling und verschiedenen anderen Marketing- und Verkaufstaktiken befassen An dieser Stelle müssen wir uns jedoch nur auf die Ziele Ihrer Website konzentrieren und darauf, was sie erreichen muss Natürlich wäre der Verkauf das Hauptziel jedes E-Commerce-Unternehmens, aber das sekundäre Ziel wäre letztendlich, so viele E-Mail-Adressen wie möglich zu sammeln , damit Sie später an diese bestimmte Person verkaufen können . Erstellen Sie eine E-Mail-Liste, die es Ihnen ermöglicht, in direktem Kontakt mit potenziellen Kunden zu bleiben , die daran interessiert sind, was Sie zu verkaufen haben. Auf diese Weise können Sie später mehr Umsatz erzielen. Wenn Sie nun eine Website erstellen, digitale Produkte oder Dienstleistungen verkauft werden, ist der Ansatz ziemlich einfach und unkompliziert. Damit Ihr Unternehmen erfolgreich sein kann, müssen Sie nun letztendlich Ihre Produkte oder Dienstleistungen verkaufen. Und um das zu tun, Sie eine Art Verkaufsgespräch mit einem potenziellen Kunden führen , um seine Bedürfnisse zu besprechen, damit er letztendlich bei Ihnen kaufen kann und sich dabei wohl fühlt. Bei einer Website, die eine Dienstleistung oder ein digitales Produkt oder etwas Immaterielles verkauft , wie zum Beispiel eine E-Commerce-Marke, dann sollte Ihr primäres Ziel letztendlich darin bestehen, eine Art Verkaufsgespräch zu vereinbaren oder tatsächlich zu prüfen, ob das möglich ist persönlich konzentriere mich bei meinem Dienstleistungsgeschäft darauf, Ich persönlich konzentriere mich bei meinem Dienstleistungsgeschäft darauf, Verkaufsgespräche zu generieren, sodass ich das Projekt tatsächlich mit dem Kunden besprechen und von dort aus den Verkauf abschließen kann dem Kunden besprechen und von dort aus den Verkauf abschließen Als sekundäres Ziel könnte dies nun darin bestehen, Vertrauen aufzubauen. Zum Beispiel habe ich für die Website meiner Branding-Agentur , clementinh do, meine Website so positioniert, dass sie all die Arbeit präsentiert, die all die Arbeit präsentiert, die ich in den letzten zehn Jahren geleistet habe Ich stelle auch sicher, dass ich alle Fragen, die potenzielle Kunden haben könnten, mit häufig gestellten Fragen beantworte alle Fragen, die potenzielle Kunden haben könnten, mit häufig gestellten Fragen und Testimonials von früheren Kunden hinzufüge , mit denen wir zusammengearbeitet haben Und ich habe auch darauf geachtet, einige Quizfragen auf der Website hinzuzufügen , damit wir tatsächlich Leads generieren können, indem den Kunden in einer digitalen Umgebung Fragen stellen Die Realität ist, dass Kunden nicht wissen, was sie nicht wissen. Indem wir ihnen Fragen stellen, die zum Nachdenken anregen, positionieren wir uns letztendlich als Experten dem Gebiet der Markenbezeichnung, des Markendesigns und auch der Website-Entwicklung . Wenn Kunden mit uns in Kontakt treten und tatsächlich anfangen, an unseren Tests teilzunehmen und sich auf unserer Website umzuschauen, sie zumindest das Gefühl zu dass wir wissen, wovon wir sprechen Der Aufbau einer Website für eine persönliche Marke basiert nun einer Reihe verschiedener Ziele, aus denen Sie wählen können Dies sind die häufigsten Ziele, die ich für Websites mit persönlicher Marke sehe Das erste Ziel besteht darin, Ihre E-Mail-Liste zu erstellen. Ähnlich wie bei einer E-Commerce-Website versuchen Sie beispielsweise, eine E-Mail-Liste und eine Liste von Personen zu erstellen , an die Sie später verkaufen können , wenn die Zeit reif ist. Sie stehen im Wesentlichen in direktem Kontakt mit Personen, die daran interessiert sind, was Sie sehen müssen und was Sie möglicherweise in Zukunft zu bieten haben. also letztendlich eine Art Lead-Generierung oder einen kostenlosen Download haben Lead-Generierung oder , bei dem die Leute ihre E-Mail-Adresse gegen diese bestimmte Ressource eintauschen können , wird Ihnen das letztendlich helfen Ihre E-Mail-Liste superschnell zu erweitern. Das wäre wahrscheinlich Ihr Hauptziel. Aber was wären sekundäre Ziele , die Sie möglicherweise verfolgen könnten? Nun, wenn Sie wirklich sekundäre Ziele hinzufügen möchten, könnte das darin bestehen, Ihre Fangemeinde in den sozialen Medien zu erhöhen. Zum Beispiel kann dich jemand auf YouTube finden und dann deine Website besuchen, und wenn du kleine Symbole in deinem Fuß hast, im Grunde zeigen, dass du auch auf TikTok und Instagram aktiv bist, können dich die Leute auch auf diesen anderen Plattformen finden . Im Grunde schaffen Sie also dieses Ökosystem und diese Gemeinschaft von Menschen , die mehr über Sie erfahren und letztendlich dem folgen wollen, was Sie zu sagen haben. Jetzt, wo die persönliche Marke einer Person wächst, muss die Website natürlich muss die Website auch verschiedene Arten von Produkten anbieten. Wenn die persönliche Marke zum Beispiel über viel Autorität und Vertrauen verfügt, kann es sein, dass diese Person für Vorträge und vielleicht auch für Markenwerbung gebucht wird . Sie müssen der Website also weitere Elemente hinzufügen, um dem Rechnung zu tragen Ich werde mir verschiedene Websites und die Ziele ansehen , die sie im Laufe des Kurses erreichen wollen. Machen Sie sich keine Sorgen, wenn die Dinge noch nicht zu 100% geklärt sind. An diesem Punkt müssen Sie nur noch anfangen, über die Ziele nachzudenken , die Ihre Website erreichen soll , und sie aufzuschreiben. Denn wenn Sie sie aufschreiben, werden Sie feststellen, dass alles, was Sie tun, wenn Sie tatsächlich mit der Gestaltung Ihrer Website und dem Aufbau Ihrer Website beginnen Ihrer Website und dem Aufbau Ihrer Website es sehr einfach macht, wenn Sie einen klaren Fokus auf das haben, was Sie erreichen möchten. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese Lektion gefällt und wir sehen uns in der nächsten. Wir sehen uns. 25. Strategisches Website-Design: Inspiration finden: Bevor Sie mit dem Aufbau Ihrer Website beginnen, benötigen Sie etwas Inspiration. Jetzt gibt es zwei Hauptbereiche, an denen Sie beim Entwerfen Ihrer Website und beim Nachdenken über Ideen für Ihre Website eine unglaubliche Menge an Inspiration finden können beim Entwerfen Ihrer Website und beim Nachdenken über Ideen für Ihre Website eine unglaubliche Menge an Inspiration . Jetzt kommt der erste in Form von Kaffee. Und um ehrlich zu sein, das ist so ziemlich der Ort, an dem meine ganze Energie heutzutage herkommt, mit ein bisschen Zucker und Nachtisch. Und Binsu. Wenn Sie noch nie BinsU gegessen haben, probieren Sie es aus Es ist unglaublich. Und noch ein Ort, an dem du Inspiration finden kannst, hast du es erraten? Online. Daher empfehle ich diese drei Websites, um sich online für Ihre Ideen zur Website-Entwicklung inspirieren zu lassen. An erster Stelle stehen also Auszeichnungen mit der Schreibweise E W, W, W. Ards.com Ards.com Auszeichnungen sind im Grunde genommen der Höhepunkt aller Website-Entwicklungsdesigns Nein, die Websites sind extrem gut gestaltet und werden im Wesentlichen von Experten für Website-Entwicklung bewertet , sodass Sie die besten Websites viel früher erhalten können , ohne viele schlechte Websites durchsuchen zu müssen , falls das Wenn Sie also Schwierigkeiten haben zu verstehen, was eine gute und eine schlechte Website ausmacht, können Sie sich diese Websites ansehen und wissen , dass sie alle ziemlich genau richtig sind Jetzt können Sie tatsächlich auf jede Website klicken und die Website ein bisschen mehr erleben und ein bisschen verstehen wie die Person tatsächlich auf die Idee gekommen ist, warum sie bestimmte Dinge getan hat, nur um wirklich eine Vorstellung davon zu bekommen, wie Sie Ihre Website-Entwicklung angehen möchten. Denken Sie bitte daran, und ich habe das bereits früher in dem Kurs erwähnt, dass Sie, wenn Sie sich andere Websites ansehen , Ihre Website nicht kopieren müssen, Sie wissen schon, Spade for Speed, aber was Sie tun können, ist, dass Sie sich letztendlich ansehen können , was Ihnen an dieser Website gefällt , das dann als Inspiration von dieser Website nehmen , um es als Teil Ihrer eigenen Idee zu verwenden. Das Tolle an Auszeichnungen ist also, dass Sie die Website selbst besuchen und sehen können die Website selbst besuchen und , wie sie vollständig in Bewegung ist, sodass Sie tatsächlich erleben können , was der Designer gebaut hat. Ein weiterer großartiger Ort, um sich inspirieren zu lassen, ist eine Website namens B Hands. Und wieder gibt es so viele verschiedene Arten von Websites, aus denen Sie wählen können. Wenn Sie also einfach durchblättern und etwas finden , das Ihrer Meinung nach cool aussieht , wie zum Beispiel dieses, dann können Sie tatsächlich den Prozess durchlaufen wie dieser bestimmte Designer letztendlich , wie dieser bestimmte Designer letztendlich auf die Idee gekommen ist. Und auch hier können Sie einfach die Dinge, die Ihnen gefallen, von der Website nehmen . Vielleicht magst du einfach die Schrift und wie elegant sie aussieht, vielleicht magst du das Farbschema und wie die Fotografie wirklich gut zu den Weiß-, Grau- und Schwarztönen der Websites passt Grau- und Schwarztönen der Vielleicht gefällt dir die Tatsache , dass es wirklich sauber und einfach und nicht zu viel los ist Machen Sie sich also so viele Notizen wie möglich, denn später, wenn wir tatsächlich Erstellung Ihrer Websites beginnen, werden Sie in der Lage sein, genau zu verstehen , was Ihnen gefällt und was nicht , sodass das Endergebnis besser ist, als Sie sich jemals vorstellen können. Be Hans hat, um ehrlich zu sein, die größte Auswahl an unglaublichen Websites für jede Menge verschiedener Arten von Websites Egal, ob es sich um eine persönliche Marke oder ein Dienstleistungsunternehmen oder sogar um ein Dienstleistungsunternehmen in einer bestimmten Branche handelt, Sie können nach der Art von Website suchen , die Sie sehen möchten Und letztendlich wird B Hans Ihnen die relevantesten Beispiele geben die relevantesten Beispiele , die auch am meisten geschätzt werden, sodass Sie ohne zusätzlichen Aufwand die bestmöglichen Websites auf der Plattform erhalten . Der letzte Ort, an den Sie vielleicht nicht gedacht haben, als Sie sich Inspiration für Ihr Website-Design geholt haben, ist Pinterest. Wie Sie hier sehen können, bietet Pinterest einige unglaubliche Beispiele für die Entwicklung von Websites, viele verschiedene Arten von Websites für viele verschiedene Arten von Branchen, und Sie müssen sich nicht nur von den Arten von Websites inspirieren lassen , die für Ihre spezielle Marke spezifisch sind. Sie können sich Websites von vielen verschiedenen Marken ansehen und letztendlich das Beste aus allen herausholen um Ihrem Nutzer ein wirklich einzigartiges Erlebnis zu bieten. Und ähnlich wie bei B Hans können Sie nach ganz bestimmten Arten von Websites wie E-Commerce-Websites, Websites persönlicher Marken oder Dienstleistungswebsites suchen ganz bestimmten Arten von Websites wie E-Commerce-Websites , um die Arten von Websites zu finden, die für Ihre spezielle Marke und Ihr Unternehmen relevant sind , sodass Sie sich viel früher inspirieren lassen können. Ähnlich wie bei B-Hands stehen auch Pinterest-Sticks, die besten Websites ganz oben, sodass Sie die bestmöglichen Beispiele viel früher erhalten. 26. Strategisches Website-Design: E-Commerce-Website-Beispiele: Der Aufbau einer E-Commerce-Website bedeutet, dass Sie grundsätzlich so viele Produkte wie möglich für so viel wie möglich verkaufen müssen. Und wenn Sie in Ihrem speziellen Markt der Beste sein möchten, sollten Sie nach den Besten in Ihrer Branche suchen. Wenn Sie zum Beispiel ein Schmuckunternehmen wären, würden Sie sich jemanden wie Tiffany und Co. ansehen genau weiß , wie man hochwertige Produkte verkauft , Ja, sie gibt es tatsächlich schon seit 1837, aber das bedeutet nur, dass es eine Fundgrube an Lektionen gibt , die man lernen kann damit Sie herausfinden können, was Ihnen an der Art und Weise, wie sie ihre Website gestalten, gefällt und was nicht Jetzt können Sie hier sehen, dass all ihre Produktfotos absolut makellos sind Sie haben ihre Produkte auch mit einigen schönen Lifestyle-Aufnahmen bereichert, ihr Produkt von einem schönen Model gewonnen wurde Sie können auch sehen, dass sie das ziemlich oft tun, wenn sie das Model zeigen, das die Halskette tatsächlich trägt, nur um Interesse des Benutzers wieder zu wecken, und sie schauen sich nicht immer wieder alltägliche Produkte an Sie können sehen, dass die Benutzeroberfläche wirklich, wirklich nahtlos ist Sie können tatsächlich die verschiedenen Produkte durchsuchen. So können Sie wirklich verstehen, was Sie kaufen, bevor Sie tatsächlich auf das Produkt klicken , um sich die Einzelheiten anzusehen Und Sie können sehen, wie sie sich darauf konzentrieren, eine sehr einfache Farbpalette aus Grau- und Weißtönen und, Sie wissen schon, Bronzetönen zu verwenden eine sehr einfache Farbpalette , Weißtönen und, Sie wissen schon, Bronzetönen um die Marke letztendlich wirklich gut zu positionieren und die Hauptfarbe von Tiffany durchscheinen zu lassen sind nur ein paar Dinge , die ich mitgenommen habe die Tiffany - und Core-Website für ein paar Minuten angesehen habe, aber Sie sollten mehr Zeit auf den Websites Ihrer Konkurrenz verbringen , um letztendlich zu sehen was sie gut machen und was nicht. Lassen Sie sich inspirieren, machen Sie sich Notizen und erfahren Sie, was Ihnen gefällt und was Meinung nach für Ihre spezielle Marke funktionieren wird Jetzt, als eine weitere Marke , die weiß, was sie tut , wenn es um E-Commerce geht, gelinde gesagt. Schauen wir uns die Website von Nike an, um herauszufinden, was sie tun um wirklich mit ihrer Zielgruppe in Kontakt zu treten und letztendlich das bestmögliche Markenerlebnis zu schaffen , um so viele Produkte wie möglich zu verkaufen. Was Sie hier sehen können, sobald Sie auf die Nike-Website kommen , ist, dass sie sich sehr auf Turnschuhe konzentrieren. Und ein Großteil des Umsatzes von Nike stammt tatsächlich aus Schuhen und Turnschuhen, insbesondere den Jordan-Sneakers, die in den USA und auf der ganzen Welt sehr beliebt sind. Was Sie daraus lernen können , ist, dass, wenn Sie ein Hauptprodukt oder einen Bestseller haben, dieses bei allem, was Sie auf Ihrer Website tun, im Vordergrund stehen sollte . Das sollte das erste Produkt sein, das Sie sehen. Das sollte das Produkt sein , das am leichtesten vorgestellt wird. Und denken Sie auch daran, dass wir, wenn wir uns eine Website tatsächlich ansehen, sie in dieser Reihenfolge von oben links nach unten rechts betrachten. Also gehen wir in Reihen rüber. Also, was Sie letztendlich tun wollen, ist es so zu betrachten, als ob Sie ein Buch lesen würden. Es sei denn, in einigen Kulturen, in denen man von rechts nach links liest, lesen die meisten Menschen in der westlichen Welt von links nach rechts. Denken Sie also daran und stellen Sie sicher, dass Sie sich in den Produkten von links nach rechts positionieren den Produkten von links nach , basierend auf ihrer Bedeutung und Beliebtheit. Also nochmal, ich schaue mir nur die verschiedenen Elemente der Website an und versuche, so viel wie möglich mitzunehmen. Ich mag diesen speziellen Bereich wirklich sehr, ganz einfach, wo er so etwas wie eine Geschenkkarte ist, oder? Die besten Geschenke. Nike. Es sieht einfach richtig cool aus. Ich liebe das Farbschema, ich liebe es wie Gold und Grün zusammenarbeiten. Das könnte also möglicherweise etwas sein, das ich aufschreibe oder vielleicht sogar einen Screenshot mache, um zu sagen: Okay, wenn ich eine Geschenkkarte machen werde, mache ich so etwas. Das ist die Art von Stil, die ich mir wünsche. Und ich kann das in die nächste Phase übernehmen , in der es darum geht, die Website zu erstellen und diesen bestimmten Teil der Website als Inspiration zu verwenden . Wenn ich im Rahmen meines speziellen Angebots eine Geschenkkarte anbieten möchte . Egal, woher du deine Inspiration nimmst, ob es nun B-Hands, Auszeichnungen, Pinterest oder deine Konkurrenz sind, alles, was zählt, ist, dass du dir die Zeit nimmst , um zu lernen, was dir gefällt und was nicht. So können Sie die beste Website für Sie erstellen. Wie dem auch sei, ich hoffe wirklich, dass dir diese Lektion gefallen hat. Ich sehe dich in der nächsten. Wir sehen uns. 27. Strategisches Website-Design: Beispiele für persönliche Marken-Website: Als Inspiration für Websites mit persönlicher Marke können Sie sich ansehen, wie unglaublich diese spezielle Website für UC und Bolt aussieht , diesen extrem schnellen Typen, dem Sie nicht hinterherjagen oder von dem Sie auch nicht verfolgt werden möchten . Nun, um ganz ehrlich zu sein, liebe ich die Einfachheit dieser Website wirklich, aber abgesehen davon sehe ich nicht viel von der Website, was mir Ich würde eigentlich nicht viel von dieser speziellen Website in meinem eigenen Design Ich denke, es ist sehr einfach sehr minimal. Mir gefällt wie es mit seinen Farben auf die Marke abgestimmt ist, und ich mag das Logo sehr. Aber abgesehen davon ist das nicht wirklich das, wonach ich suche, und das ist okay. Wenn Sie sich also tatsächlich eine Website ansehen, müssen Sie nicht alles daran lieben. Sie können tatsächlich viele Dinge daran nicht mögen. Gehen Sie einfach einen Schritt zurück und betrachten Sie die Dinge aus Ihrer Sicht des Benutzers, oder? Weißt du, wenn du der Nutzer wärst, was ist mit dieser Website, findest du, dass sie zur Erfahrung beiträgt und was nimmst du aus der Erfahrung mit? Denn wenn Sie sich die Zeit nehmen, genau zu verstehen, was Ihnen von einer Website aus gefällt, können Sie später bessere Entscheidungen treffen, aber Sie erlauben sich nur, aber Sie erlauben sich nur diese Entscheidungen zu treffen und tatsächlich zu erfahren , was Ihnen gefällt und was nicht, indem Sie die Zeit nehmen, zu verstehen, was es sonst noch gibt? Sie müssen sich andere Websites in Ihrem Bereich ansehen , um zu verstehen was sie tun , damit Sie verstehen können was für Sie ist und was nicht. Wenn wir uns eine andere Website von David Goggins ansehen , dem wirklich inspirierenden Navy-Seal-Typ , der ursprünglich sehr übergewichtig war und jetzt einfach wie ein absoluter Jack Maniac ist wie ein absoluter Jack Er bringt dich dazu, sein Buch auf diesen verschiedenen Plattformen zu kaufen diesen Er hat auch großartige Zeugnisse von Leuten wie Dyn the Rock Johnson und Und letztendlich ist auch diese Website auch Ich bin nicht ganz in sie verliebt. Aber eine Sache, die ich an dieser Website wirklich mag , ist die Seite mit den Erfolgen. Er hat also eine Seite, die sich mit seinen Jahren sportlicher Leistungen bis ins Jahr 2005 befasst. Also das sind all die verschiedenen Rennen , an denen er teilgenommen hat um ihn letztendlich an den Punkt zu bringen , um ihn letztendlich an den Punkt zu bringen, an dem er jetzt dieser absolute Wahnsinnige ist , der buchstäblich, wissen Sie, ich meine, das ist ein Beispiel für ihn, als er am Tag zuvor wieder ein Navy Seal war am Tag zuvor wieder ein Navy Seal Jetzt ist er, weißt du, ich glaube, einfach einer der fittesten und athletischsten Menschen auf dem Planeten Er ist einfach verrückt, oder? Also, diese Website zeigt tatsächlich , wer er als Person ist Es zeigt die Art von Mentalität, die er hat, und er erzählt Ihnen nicht nur davon Er zeigt dir sogar, dass ich all diese Rennen gemacht habe. Ich war Erster, ich wurde Zweiter. Weißt du, ich habe es nicht geschafft, aber ich habe es trotzdem geschafft, und es ist wie ein 22-Stunden-Rennen, was verrückt ist. Mir gefällt diese spezielle Seite als Vertrauensbildner. Ich denke, das ist etwas, das ich wirklich als Inspiration mitnehmen kann , wenn ich meine eigene persönliche Markenwebsite erstelle. Eine persönliche Marke sollte in der Lage sein, den Leuten zu zeigen , dass sie ihren Weg gehen können , und auch, was wirklich wichtig ist, weil Sie Vertrauen und Autorität aufbauen müssen. Egal, woher Sie sich inspirieren lassen, ob es sich um persönliche Hände, Auszeichnungen, Interesse oder Ihre Konkurrenz handelt, alles, was zählt, ist, dass Sie sich die Zeit nehmen , um zu lernen, was Ihnen gefällt und was nicht. So können Sie die beste Website für Sie erstellen. Wie dem auch sei, ich hoffe wirklich, dass dir diese Lektion gefallen hat. Ich sehe dich in der nächsten. Wir sehen uns. 28. Strategisches Website-Design: B2B-Website-Beispiele: Wenn es beispielsweise darum geht, sich von Dienstleistungsunternehmen inspirieren zu lassen oder Software zu verkaufen , ist monday.com ein wirklich gutes Beispiel Nun, falls du nicht weißt, was monday.com ist, ist es im Grunde wie eine Produktivitätsplattform , auf der du letztendlich deinen Tag oder deine Kunden und all diese Dinge verwalten kannst deinen Tag oder deine Kunden und all diese Dinge verwalten deine Kunden und all diese Es ist im Grunde genommen sehr ähnlich wie Vorstellung, aber im Grunde ist es teurer Nun, was monday.com angeht, kannst du hier sehen, dass sie eine wirklich nette Auswahl an Optionen haben . Also das ist im Wesentlichen als Kunde, ich werde wählen, okay, vielleicht möchte ich es für Kreativität und Design verwenden , loslegen Also fange ich im Grunde an und es führt mich direkt zu einer Anmeldeseite. Ich lasse mich hier inspirieren und denke: Okay, vielleicht möchte ich bei meinem speziellen Geschäft die Optionen aufzeigen, die der Nutzer haben sollte, sodass wir, weißt du, damit beginnen können, alle Webseitenbesucher aufzunehmen und sie bestimmten Kategorien zuzuordnen , damit ich in Zukunft ein besseres Erlebnis bieten kann, denn wenn ich auf diese Schaltfläche klicke, sagt das monday.com , dass es mich weiterleiten auf diese Schaltfläche klicke, sagt das monday.com , dass es mich weiterleiten soll zu Seiten, die für Kreativität und Design relevant sind Wenn ich auf etwas wie Marketing klicke , werde ich zu einer Seite weitergeleitet, die für Marketing relevanter ist. Wenn ich auf etwas wie Personalabteilung klicke, weiß es, dass ich es für HR verwenden werde. Denken Sie also darüber nach, wenn Sie die Seiten Ihrer Website so gestalten möchten , dass die Nutzer so schnell wie möglich auf die entsprechende Seite gelangen . So können sie sich anmelden, damit sie anfangen können, Ihnen Geld zu geben und gemeinsam mit Ihnen eine Lösung für das Problem zu finden. Nun, eine weitere wirklich coole Sache, die ich Ihnen zeigen möchte , weil ich so über Websites denke, wenn ich sie mir nur ansehe, ist einfach, wie cool es ist, wie diese kleinen Dinge aufleuchten, um mit Ihnen aus Sicht der Benutzererfahrung zu interagieren Ich mag einfach die Tatsache, dass sie alle zu den Farben der Symbole passen, und ich mag einfach die Tatsache, dass ich mich tatsächlich mit der Website beschäftige und es sich anfühlt, als wäre meine Hand eine Erweiterung der Website. Denken Sie also daran, dass Inspiration von überall her kommen kann. Es kann von Farben kommen, es kann aus Mitteln kommen, es kann aus Strukturen kommen. Seien Sie aufgeschlossen, wann immer Sie eine Website entwickeln oder nach Inspiration suchen, denn Inspiration kann von überall kommen. Wenn wir auf diese Website gehen, das ist Canva, von der du bestimmt schon einmal gehört hast Es ist quasi eine visuelle Designplattform für alle. Jetzt können Sie sehen , dass sie buchstäblich genau den gleichen Ansatz verwenden. Sie haben eine Art interaktiven Bereich in dem man im Grunde sagen kann: Okay, ich möchte Canva für Präsentationen verwenden, oder vielleicht möchte ich es für Websites verwenden Das ist ziemlich praktisch. Oder vielleicht möchte ich es für Instagram-Posts verwenden. Es macht es Ihnen sehr einfach, die entsprechende Seite zu finden , zu der Sie so schnell wie möglich gelangen müssen . Und das ist kein Fehler. Dies ist letztendlich der bestmögliche Weg einen Benutzer dazu zu bringen, sich anzumelden, da Canva und monday.com das Ziel haben, die Leute dazu zu bringen, sich für die Nutzung ihrer Plattform anzumelden Denn wenn sie sich nicht anmelden, raten Sie mal, was? Sie werden nicht bezahlt und können keine Einnahmen erzielen. es den Leuten also wirklich einfach gemacht wird, die Seite oder die Informationen, die sie benötigen, wirklich leicht zu finden die Informationen, die sie benötigen, wirklich leicht und so schnell wie möglich dorthin zu gelangen, wo sie hin müssen, wird das die Anzahl der Anmeldungen erhöhen , die diese beiden Plattformen erreichen können Egal, woher Sie sich inspirieren lassen, ob es sich um B-Hands, Auszeichnungen, Pinterest oder Ihre Konkurrenz handelt, alles , was zählt, ist, dass Sie sich die Zeit nehmen, um zu lernen was Ihnen gefällt und was nicht Sie können die beste Website für Sie erstellen. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese Lektion gefällt. Ich sehe dich in der nächsten. Wir sehen uns. 29. Strategisches Website-Design: Definiere deine Ziele: Okay, also Strukturieren Sie Ihre Website-Seiten. Warum fangen wir an und wie machen wir das? Nun, wenn Sie sich an eine frühere Lektion erinnern, als wir über die Startseite gesprochen haben und die Aufmerksamkeit der Person in kürzester Zeit erregen wollten, wissen Sie, welche Struktur wir verwenden müssen. Und diese Struktur basiert auf drei Schlüsselfragen Nummer eins ist, bin ich am richtigen Ort? Nummer zwei, kann ich dir vertrauen? Eine Nummer drei ist? Erzähl mir mehr. Was bedeutet das also für die Struktur Ihrer Webseiten? Unabhängig davon, über welche Seite Sie auf Ihrer Website sprechen, sollten Sie die Seiten Ihrer Website letztendlich jederzeit nach diesen drei Fragen strukturieren Ihrer Website letztendlich jederzeit nach . Und wenn Sie der einfachen Formel folgen, können Sie nichts falsch machen, wenn versuchen, eine Seite für Ihre Website zu erstellen. Und das liegt daran, dass sie nach genau den gleichen Fragen strukturiert sind , die sich ein Website-Besucher stellt, wenn Ihre Website zum ersten oder zweiten Mal besucht . Denken Sie also immer in dieser Reihenfolge an die Seiten Ihrer Website. Und das gilt für jede Art von Website, egal ob es sich um eine E-Commerce-Website, eine Service-Website oder eine persönliche Markenwebsite handelt. In der nächsten Lektion dieses Kurses werden wir uns nun damit befassen, wie verschiedene Websites genau denselben Ansatz verfolgen und ihn nur etwas anders strukturieren, um ihn sich zu eigen zu machen. Offensichtlich ist jedes Unternehmen einzigartig. Ich möchte Ihnen ein solides, vertrauenswürdiges Framework an die Hand geben, dem Sie beim Erstellen einer brandneuen Seite für Ihre Website folgen können. Denn letztendlich muss Ihre Website gut aussehen, aber auch Ihre Ergebnisse erzielen, und deshalb sind wir hier. Eine Sache, die ich beim Entwerfen einer Website von Grund auf sehr nützlich finde beim Entwerfen einer Website von Grund auf sehr nützlich , ist, einfach einen Stift und etwas Papier zu nehmen und ein wirklich einfaches und leicht verständliches Diagramm zu skizzieren einfaches und leicht verständliches Diagramm zu was jeder Abschnitt ist und was der Abschnitt beinhalten sollte Zum Beispiel würde ich für die Startseite buchstäblich einfach ein Kästchen ganz oben als Heldenbereich platzieren und sagen, dem Kunden sagen, warum er hier Der nächste Abschnitt wäre ein Bereich zur Vertrauensbildung. Dann wäre der Abschnitt unten, der das ist, was wir tatsächlich tun und was wir Ihnen bieten können. Dadurch wird dem Kunden genau das gegeben, was er will, und zwar in der Reihenfolge, in der er es möchte. Und Sie können dies für jeden einzelnen Abschnitt auf der Website tun. Und wenn Sie sich die Zeit nehmen, um das Erlebnis auf Ihrer Website wirklich schnell mit einfachen Feldern und nur Text zu beschreiben das Erlebnis auf Ihrer Website , können Sie letztendlich bestimmte Probleme oder Herausforderungen erkennen bestimmte Probleme oder , bevor Sie zur Entwicklungsphase der Website gelangen , die später ansteht. Zum Beispiel ist es wirklich einfach, einfach eine Schachtel herauszukritzeln und einfach ein paar Dinge auf einem Blatt Papier mit einem Stift zu ändern ein paar Dinge auf einem Blatt Papier mit einem Stift Aber sobald Sie die Zeit und Mühe investiert haben , den Abschnitt zu entwerfen und ihn dann auf Ihrer Website in Webflow zu erstellen , wird es letztendlich viel schwieriger sein, ihn zu ändern, und Sie müssen möglicherweise zum Anfang zurückkehren, um von vorne zu beginnen An diesem Punkt können wir also alle Fehler machen, die wir wollen, und wir können so viel experimentieren, wie Ihr Herz begehrt, denn es dauert nur ein paar Sekunden alles auszukritzeln und von vorne zu beginnen und eine brandneue Struktur mit Stift und Papier aufzuschreiben . Aber nur um sicherzugehen, dass Sie sich zu 100% sicher , welche Art von Struktur Ihrer Meinung nach für Ihre spezielle Website geeignet ist, werden für Ihre spezielle Website geeignet ist, wir in der nächsten Lektion auf einige Beispiele eingehen, in denen Sie sehen können, wie einige andere Unternehmen ihre Website-Struktur genutzt haben um ihren Benutzern wirklich ein großartiges Erlebnis zu bieten. mit unserem Kollegen Delay Lassen Sie uns gemeinsam mit unserem Kollegen Delay in diese Lektion eintauchen und wir sehen uns bald wieder. 30. Strategisches Website-Design: Definiere deine Ziele: Können Sie tatsächlich Website-Vorlagen verwenden oder lohnt es sich, Ihre Website von Grund auf neu zu erstellen? Nun, die Wahrheit ist, dass Sie beides tun können. Aber was Vorlagen angeht, so sind sich die meisten Websites, wie ich in diesem Kurs bereits mehrfach gezeigt habe , sehr ähnlich Sie folgen meistens genau der gleichen Struktur. Und die Dinge, die sich am meisten unterscheiden, sind Dinge wie die Schriftarten, die sie verwenden? Die verwendeten Farben, das Logo und die Bildsprache. Davon abgesehen sind sich die meisten Websites ziemlich ähnlich. Eine Sache, die sich sehr unterscheidet, ist der tatsächliche Grund, warum die Website existiert. zum Beispiel E-Commerce-Marken, Sie haben Marken, die persönliche Marken sind, dann haben Sie auch Marken, die irgendeine Art von Service oder digitalem Produkt anbieten . Dies sind letztendlich die drei verschiedenen Arten von Websites, die es gibt. Zumindest die fiesen Websites , die Sie heute online finden werden. Und ich habe in den letzten zehn Jahren mit Tausenden von Gründern zusammengearbeitet , und am Ende erstellen wir Websites, die sich sehr ähnlich sind, sich aber vom Branding-Standpunkt aus unterscheiden Jetzt fragst du dich vielleicht, Scott, ist das überhaupt möglich? Kann ich tatsächlich eine Website auf einer Vorlage erstellen, die für mich absolut markengebunden und persönlich aussieht und sich auch so anfühlt? Nun, lassen Sie mich Ihnen ein Beispiel geben , das die Botschaft vielleicht auf den Punkt bringt. Das Erstellen einer Website ist ein bisschen wie das Dekorieren eines Hauses. Wenn Sie eine Vorlage verwenden. Das Haus ist bereits gebaut. Sie haben bereits alle Steine an ihrem Platz. Aus struktureller Sicht ist alles in Ordnung. Alles, was Sie tun müssen , ist es zu lecken, ein paar Möbel reinzustellen und schon kann es losgehen Jetzt können Sie auf jeden Fall ein komplett maßgeschneidertes Haus mit einer schönen Aussicht bauen irgendwo anders in der Mitte des Hügels ein komplett maßgeschneidertes Haus mit einer schönen Aussicht bauen, aber das wird viel mehr kosten und viel mehr Zeit in Anspruch nehmen. Es hängt also alles davon ab, was Sie zu diesem Zeitpunkt in Ihrem Unternehmen tatsächlich benötigen. Benötigen Sie etwas, das wirklich solide vertrauenswürdig ist und gut aussieht? Oder benötigen Sie etwas, das komplett maßgeschneidert ist und das viel mehr Zeit und viel mehr Energie und finanzielle Ressourcen in Anspruch nehmen wird . Es liegt natürlich ganz bei Ihnen, aber die Mehrheit der Gründer, mit denen wir in den letzten zehn Jahren zusammengearbeitet haben , hat den ersten Ansatz gewählt. Sie haben im Grunde genommen eine vertrauenswürdige, gut strukturierte Website-Vorlage verwendet und damit ihre eigene Website erstellt. Und wie Sie sehen, gibt es viele verschiedene Möglichkeiten, wie wir genau dieselbe Vorlage verwenden können , um Websites zu erstellen , die völlig anders aussehen. jetzt bitte keine Sorgen, denn später im Kurs werde ich Ihnen zeigen, wie Sie die Vorlage, die Sie inzwischen aus der ersten Phase des Kurses heruntergeladen haben sollten , nehmen und daraus eine persönliche Website machen , die perfekt zu Ihrer spezifischen Marke passt und sich für Sie absolut einzigartig anfühlt. Das spart Ihnen eine Menge Zeit, eine Menge Geld, und es wird Ihnen auch helfen, eine unglaubliche Website einfach und ohne Probleme oder Support einzurichten . Natürlich werde ich hier sein, um Sie zu unterstützen, aber ich möchte Sie nur wissen lassen , dass Sie es aufgrund der vielen Schritte, die wir in diesem Kurs haben und wie gut sie strukturiert sind, sehr einfach tun können, wenn Sie dies selbst Sie dies Schritte, die wir in diesem Kurs haben und wie gut sie strukturiert sind, sehr einfach tun können, tun möchten, was Sie tun möchten. Wir wollten die perfekte Lösung für jeden entwickeln, egal wie viel Erfahrung er mit Design oder Website-Entwicklung hat . Erstellen Sie eine Website, auf die sie wirklich stolz sein können. Jetzt, sehr bald im Kurs, werden wir uns mit Web Floor befassen und lernen, wie man Web Floor verwendet, um die Vorlage zu bearbeiten mit Bildern, beginnen mit dem Text und nehmen dann die Vorlage und machen sie zu Ihrer eigenen. Stellen Sie also sicher, dass Sie, falls Sie die Schritte in Lektion drei Phase eins dieses Kurses noch nicht befolgt haben, damit Sie Ihr Webfloor-Konto einrichten können, auch Ihre Vorlage von uns erhalten können, damit Sie später im Kurs mit dem Aufbau Ihrer Website beginnen können. Denken Sie daran, sowohl für die Anmeldung im Webflow als auch für die E-Mail, die Sie uns geben , exakt dieselbe sowohl für die Anmeldung im Webflow E-Mail-Adresse zu verwenden, damit wir Ihnen die Vorlage direkt zusenden können. Wie dem auch sei, ich freue mich riesig darauf, mit der Webflow-Plattform vertraut zu werden, und es ist sehr einfach, ihr zu folgen und es ist sehr einfach, ihr zu folgen. Wir sehen uns also in der nächsten Lektion. Wir sehen uns bald. 31. Webflow 101: Webflow-Pakete: Deshalb möchte ich mir nur ein wenig Zeit nehmen, um Ihnen die verschiedenen Webflow-Pakete zu erklären , damit Sie herausfinden können, welches das beste für Sie ist Um ganz ehrlich zu sein : Als ich die Preise von Webflows zum ersten Mal sah, war ich etwas verwirrt darüber , wofür ich bezahle Es war nicht wirklich einfach, und ich habe mich gefragt: Okay, ich zahle hier wirklich gutes Geld, um meine Website bei Ihnen zu hosten, aber was bekomme ich eigentlich dafür Nun, die Dinge, die Sie tatsächlich mit der Webflow-Plattform erhalten , wenn Sie Ihre Website auf Webflow erstellen, nicht nur das, was Sie im Paket erhalten, es ist das Gesamterlebnis Es hängt zum Beispiel davon ab, wie sehr Sie Ihre Zeit schätzen, aber anstatt 10 Stunden damit zu verbringen , etwas an Ihrer Website zu ändern, können Sie in etwa 5 Minuten etwas erledigen Das ist also das Erste, was zumindest für mich sehr wertvoll ist. Die Tatsache, dass ich, anstatt eine lange, frustrierende Situation zu durchmachen , in der ich vielleicht jemanden einstellen muss, der etwas ändert, oder dass ich viel Zeit damit verbringen muss, es selbst herauszufinden Web Floor macht es super einfach und stressfrei, was ich bei Ihnen nicht sicher bin, aber für mich persönlich lohnt es sich, ein paar Dollar mehr zu zahlen , nur um sicherzustellen, dass ich meine Freizeit mit dem verbringen kann was mir wirklich Spaß macht, anstatt zu versuchen, mit einer Website zu kämpfen , die wirklich schwer zu verwalten ist. Ein weiterer Grund, warum so viele Leute Webfloor nutzen, ist ihre Unterstützung Jetzt ist ihr Support bei weitem der beste Support auf jeder Plattform, der beste Support auf die Sie beim Erstellen einer Website verwenden können . Ich erinnere mich tatsächlich an ein Problem, das ich vor einiger Zeit mit einer Website für einen Kunden hatte . Und als ich Webfloor eine E-Mail geschickt habe, haben sie sich nicht einfach mit einem Link zu einer Community-Seite bei mir zu einer Community-Seite gemeldet, wo ich das selbst herausfinden müsste Der Typ vom Webflow-Supportteam war auf die Website gegangen, hatte das Problem behoben und mir dann gezeigt, wie er das gemacht hat Wenn es Ihnen letztlich nichts ausmacht, Stress zu haben und Zeit zu verschwenden, dann sind andere Plattformen für Sie in Ordnung, und es kann sich lohnen, ein paar Dollar zu sparen , nur um diesen Stress und diese zusätzliche Zeit zu verschwenden Wenn es Ihnen nichts ausmacht, gestresst zu sein und eine Menge Zeit zu verschwenden, dann sparen Sie auf jeden Fall die fünf bis 7 US-Dollar auf einer anderen Plattform, die Ihnen vielleicht ein bisschen besser passt Für mich persönlich könnte ich mir nichts Schlimmeres vorstellen, als eine Menge Zeit damit zu verschwenden , etwas zu reparieren und letztendlich wirklich durchschnittlichen Support zu bekommen und einfach Artikel verwiesen zu werden, um zu lesen denen das Problem in Sekundenschnelle behoben werden könnte Und das ist der Grund, warum ich Web Floor liebe , weil es dir buchstäblich so viel Freizeit bietet und dir hilft, mit dem geringsten Aufwand die bestmögliche Website zu bekommen , und das mit Premium-VIP-Support, den du bereits haben solltest, wenn du dich bereits dafür angemeldet hast. Letztlich fühlt es sich einfach so an, als würde sich Webflow wirklich darum kümmern. Lassen Sie uns also in die tatsächlichen Pakete eintauchen, die sie anbieten, und ich kann Ihnen erklären, welches für Ihre spezielle Situation am besten geeignet ist. Wenn wir uns also die verschiedenen Preispakete ansehen, gibt es zwei verschiedene Arten von Paketen. Das eine ist also allgemein und bezieht sich nur auf allgemeine Websites, wie zum Beispiel, wenn Sie eine Dienstleistung verkaufen oder vielleicht, Sie wissen schon, einen Blog oder vielleicht sogar, Sie wissen schon, eine persönliche Markenwebsite erstellen, oder wenn sie die E-Commerce-Option haben, was ziemlich selbsterklärend ist Das Tolle daran ist, dass Sie von einem zum anderen wechseln können So könnten Sie beispielsweise mit einem Basispaket von 14 USD pro Monat beginnen . Sobald Sie bereit sind, ein Produkt tatsächlich zu verkaufen, und wenn Sie Produkte zum Verkauf bereit haben, können Sie zum E-Commerce-Paket wechseln und direkt zum Standard übergehen Sie generieren also tatsächlich Verkäufe, sobald Sie bereit sind Was das kostenlose Starterpaket angeht, sind Sie darauf beschränkt, nur eine Webflow-Domain zu haben. bedeutet also im Grunde, dass Sie markenname.com nicht als Ihre Domain verwenden Sie müssen tatsächlich für das Hosting bezahlen, um eine benutzerdefinierte Domain mit Ihrer Website zu verbinden werden wir tatsächlich eine Lektion darüber haben, wie man eine benutzerdefinierte Domain mit der Website verbindet Etwas später werden wir tatsächlich eine Lektion darüber haben, wie man eine benutzerdefinierte Domain mit der Website verbindet. Bleiben Sie also auf dem Laufenden. Im Startpaket erhalten wir also tatsächlich zwei Seiten, 50 CMS-Elemente. Wenn Sie nicht wissen, was CMS-Elemente sind, handelt es sich im Wesentlichen um Dinge wie Blogbeiträge, Produkte oder vielleicht Projekte, an denen Sie aus Servicesicht gearbeitet haben Außerdem erhalten Sie 50 Formulareinreichungen für Ihr eigenes Leben auf der Website 50 Einreichungen von Formularen bedeuten im Grunde, dass jemand versucht, Sie über Ihre Kontaktseite zu kontaktieren, letztendlich diese Anfrage oder den Link zu Ihrer E-Mail-Adresse sendet diese Anfrage oder den Link zu Ihrer E-Mail-Adresse Wir gehen dann zur Lokalisierung über, was im Wesentlichen bedeutet, wenn Ihre Website auf einem französischen Computer in der Mitte von Paris mit einem französischen Benutzer auftaucht, dann wird die gesamte Website auf Französisch angezeigt einem französischen Computer in der Mitte von Paris mit einem französischen Benutzer auftaucht, , oder wenn sie in Deutschland ist, dann ist sie Deutsch, wenn sie woanders ist, dann wird es in einer anderen Sprache sein , und so weiter, usw. In Bezug auf den begrenzten Traffic dies für das Startpaket letztendlich bedeutet dies für das Startpaket letztendlich, dass 1.000 Besucher die Website betreten dürfen . Nun, dies ist eine völlig kostenlose Website, und Webflow hostet sie derzeit völlig kostenlos für Sie Denken Sie also daran, aber auch die Bandbreite von 1 Gigabyte bedeutet im Wesentlichen, dass die Website mit einer bestimmten Geschwindigkeit geladen wird. Nun, das ist vielleicht nicht die schnellste Ladezeit einer Website , die Sie je in Ihrem ganzen Leben gesehen haben, aber sie wird erfolgreich geladen. Bandbreite ist mit vielen anderen Dingen verbunden, aber das ist zumindest für mich das Wichtigste , was ich gefunden habe. Wenn ich eine Starter-Website habe, die noch nicht ganz veröffentlicht wurde, und ihr keine benutzerdefinierte Domain zugewiesen ist, weil ich keine gekoppelte Option oder kein gepaartes Paket an diese bestimmte Website angehängt habe gekoppelte Option oder kein gepaartes Paket . Das Laden dauert etwas länger. Denken Sie also bitte daran, da es schneller geladen wird. Sobald Sie eines der Peering-Pakete der Website verbunden Wenn Sie nun zum Basispaket übergehen, sind das 14$ pro Monat, was, um ehrlich zu sein, ein absoluter Gewinn ist Und dafür bekommst du deine eigene Domain. Egal, welche Domain du für deine Marke hast, du kannst sie ganz einfach verbinden, und ich werde dir später im Kurs zeigen , wie das Sie erhalten 150 Seiten für Ihre Website, was ausreichend ist. Aber eine Sache, die Sie in diesem speziellen Paket nicht erhalten , sind CMS-Artikel. Jetzt werden wir uns später im Kurs ausführlich mit CMS-Elementen befassen. Wir zeigen Ihnen also, wie Sie diese effektiv einsetzen können, um Ihnen das Leben 1 Million Mal zu erleichtern. Einreichung von Formularen angeht, erhalten Sie jetzt 500 pro Monat, was ziemlich viel ist. In Bezug auf die Lokalisierung erhalten Sie eine kostenlose Vorschau. Also nochmal, in Frankreich wird es auf Französisch erscheinen, in Deutschland wird es auf Deutsch erscheinen, und so weiter, und so weiter moderaten Traffic angeht, haben wir im Wesentlichen 50 Gigabyte Bandbreite und 250.000 Besucher, was, um ehrlich zu sein, ausreichend sein sollte, wenn Sie gerade eine Website starten Was den moderaten Traffic angeht, so haben wir im Wesentlichen 50 Gigabyte Bandbreite und 250.000 Besucher, was, um ehrlich zu sein, ausreichend sein sollte, wenn Sie gerade eine Website starten. Das bedeutet auch, dass Ihre Website superschnell geladen wird und dass sie für Ihre Nutzer super gut sein wird Wenn Sie nun zum CMS-Paket wechseln, ist dies das Paket, das ich für so ziemlich alle meine Unternehmen habe , die ich mit Webflow verwende Der Grund, warum ich das CMS-Paket verwende, ist, dass ich es wirklich einfach machen möchte Blogbeiträge hinzuzufügen, um Projekte hinzuzufügen , an denen wir in Bezug auf meine Markenagentur gearbeitet haben , um Produkte hinzuzufügen. Wenn ich zum Beispiel eine E-Commerce-Marke aufbaue, kommt es auf Effizienz an Anstatt also eine brandneue Seite erstellen zu müssen, müssen wir nur ein paar Dinge im Backend der Website hinzufügen , und die Seite wird mithilfe der CMS-Funktion automatisch für Sie erstellt . Jetzt, auch mit der CMS-Option, erhalten Sie einen KR Form Submissions Three Content Creator, sodass die Leute tatsächlich reingehen und Ihnen helfen können, Inhalte in Ihrem Blog oder vielleicht auf Ihrer Projektseite zu erstellen , oder natürlich aus welchem Grund auch immer Sie die Website nutzen. Und für das CMS-Paket erhalten Sie 200 Gigabyte Bandbreite, was die Geschwindigkeit Ihrer Website beinhaltet, aber auch die Menge an Inhalten, die Sie tatsächlich auf Ihre Website hochladen können . Wenn ich also zum Beispiel Bilder oder Videos für die Projektseite hinzufüge, dann werden diese speziellen Bilder letztendlich Speicherplatz beanspruchen Diese können jedoch alle auf der Website gespeichert werden , sodass die Website superschnell geladen wird. erhalten Sie jetzt auch 250.000 Mit diesem Paket erhalten Sie jetzt auch 250.000 Besucher. Und dann gehen wir im Grunde zum Geschäftspaket über. Nun, um ganz ehrlich zu sein, ich kenne niemanden, der das Business-Paket benötigen würde, der das Business-Paket benötigen wenn er gerade eine neue Website startet Ich persönlich würde es super einfach halten. Wenn Sie also Ihre Website tatsächlich erstellen, würde ich sie vielleicht als kostenloses Paket behalten , bis Sie im Grunde mehr als zwei Seiten hinzufügen müssen oder Sie beginnen müssen, CMS-Elemente in mehreren Kategorien hinzuzufügen. Auch hier gilt: Wenn Sie noch nicht wissen, was CMS ist werden wir später im Kurs alles behandeln, aber es wird für Sie sehr nützlich sein und wenn Sie es einmal gelernt haben, wird es Ihnen in Zukunft eine Menge Zeit kosten. Aber sobald Sie dem kostenlosen Paket entwachsen sind, liegt die nächste Option im Wesentlichen zwischen dem Basispaket und dem CMS-Paket Um die Dinge ganz einfach zu halten, wenn Sie das Gefühl haben, dass Sie wirklich keinen Blog benötigen und keine Projekte hinzufügen müssen, und Sie müssen nicht immer wieder dieselbe Art von Inhalt hinzufügen , wie zum Beispiel Beispiele für Ihre Arbeit oder, Sie wissen schon, Kundenrezensionen oder ähnliches, wo Sie die Dinge wirklich effizient in einem einzigen System verwalten können Dinge wirklich effizient in einem einzigen System verwalten . Ort, dann benutze einfach das Basispaket. Mehr als das brauchst du nicht. Wenn Sie jedoch tatsächlich einen Blog hinzufügen und die Dinge innerhalb der Website sehr einfach gestalten möchten einen Blog hinzufügen und die Dinge innerhalb der Website sehr einfach gestalten , kostet das CMS-Paket nur etwa 9 US-Dollar mehr und spart Ihnen tatsächlich das Zehnfache der Zeit, und spart Ihnen tatsächlich das die Sie benötigen würden, wenn Sie nur das Basispaket hätten Nur um völlig transparent zu sein, basieren diese Preise auf einer jährlichen Abrechnung Sie zahlen also grundsätzlich einmal für das gesamte Jahr, und dann ist Ihre Website das ganze Jahr über ohne Unterbrechungen aktiv . Wenn Sie jedoch monatlich zahlen möchten , steigt der Preis ein wenig. Nur ein paar Dollar, also ist es kein gutes Geschäft. Wenn Sie jedoch so viel wie möglich sparen möchten, können Sie bis zu 22% sparen indem Sie einfach das Jahr im Voraus bezahlen Bei E-Commerce-Marken sind die Dinge jetzt etwas anders Wenn wir also zum E-Commerce-Bereich gehen, können wir grundsätzlich sehen, dass es drei Optionen gibt. Es gibt Standard, Plus und Advanced. Auch hier gilt: Wenn Sie gerade erst als Marke anfangen, würde ich Ihnen nicht empfehlen, die Plus- oder die Advanced-Option zu wählen. Der Grund dafür ist, dass Sie zu Beginn nicht mehr als 500 E-Commerce-Artikel auf Ihrer Website haben sollten mehr als 500 E-Commerce-Artikel . Ich persönlich würde Ihnen nur empfehlen , maximal fünf bis zehn zu haben. Nun, jedes E-Commerce-Paket enthält eine andere Ebene von E-Commerce-Artikeln, CMS-Artikeln und einigen anderen Funktionen, die wir jetzt eingehen werden. Zum Beispiel verfügen Standard Plus und Advanced über unterschiedliche Artikelstufen, die Sie tatsächlich auf Ihrer Website verkaufen können. Zum Beispiel gibt das Standardpaket 500€. Das Plus gibt 5.000 im Voraus, ergibt 15.000. Auch hier kann ich mir keine neue Marke oder ein neues Startup vorstellen , das mehr als 500 Artikel verkauft. Ich würde nur vorschlagen, sich an den Standard zu halten. In Bezug auf CMS-Artikel erhalten Sie entweder 2000, 10.000 oder 10.000. Und was die Transaktionsgebühr anbelangt, bedeutet das einfach, dass Ihnen jedes Mal wenn jemand etwas von Ihrer Website kauft, , wenn jemand etwas von Ihrer Website kauft, 2% des bezahlten Betrags berechnet werden Und das zusätzlich zur Peer-pL- oder Stripe-Gebühr, die ebenfalls einen kleinen Teil von dem, was gekauft wird, abnimmt Jetzt kostet das Standardpaket 2% und dann die Gebühren von PayPal und Stripe, wohingegen das Plus im Voraus letztendlich genau das berechnet, was Peer pL und Stripe verlangen. Es fallen also keine zusätzlichen 2% wenn Sie sich das Plus - oder das Advanced-Paket sichern. Das wirklich Tolle an all diesen Paketen ist, dass sie alle die Funktionen des CMS-Plans enthalten. Wenn wir uns also erinnern, werden wir irgendwo 23$ pro Monat für die CMS-Pakete zahlen irgendwo 23$ pro Monat für die CMS-Pakete Jetzt ist es tatsächlich ein gutes Preis-Leistungs-Verhältnis , wenn Sie darüber nachdenken, denn für das CMS-Paket zahlen Sie 23 USD pro Monat Wenn Sie jedoch zu irgendeinem Zeitpunkt auf ein E-Commerce-Paket aufrüsten möchten , können Sie das Standardpaket erwerben, das für Sie mit nur 29 USD pro Monat ausreichend sein wird, was buchstäblich 6 USD mehr ist als das Sie erhalten also alle E-Commerce-Funktionen und die Möglichkeit Produkte und Dienstleistungen direkt von Ihrer Website aus zu verkaufen , für zusätzliche 6 US-Dollar, was wirklich gar nicht so viel Und eine weitere tolle Sache, wenn Sie jährlich mit E-Commerce bezahlen , ist, dass Sie im Grunde genommen eine dumme Menge an Ersparnissen erzielen Sie können bis zu 30% gegenüber dem sparen was Sie normalerweise kosten würden, wenn Sie monatlich zahlen. Jetzt liegt es natürlich ganz bei Ihnen, welches Paket Sie für das beste halten. Aber wenn Sie sich nicht sicher sind, können Sie sich gerne an mich wenden , denn ich gebe Ihnen gerne Ratschläge oder erzähle Ihnen vielleicht ein oder zwei Geschichten darüber, was mit mir passiert ist, als oder erzähle Ihnen vielleicht ein oder zwei Geschichten darüber, was mit mir passiert ist ich anfing, Webfloor zu nutzen , und welches Paket damals am besten für mich war und welche Pakete ich jetzt für meine Websites verwende, die ich auf der Webfloor-Plattform habe. Wie immer bin ich hier, um auf jede erdenkliche Weise zu helfen und zu unterstützen , also wünsche ich Ihnen eine wunderbare Liebe. Vielen Dank für Ihre Zeit und wir sehen uns in der nächsten Lektion. 32. Webflow 101: Webflow im Vergleich zu anderen Plattformen: Jetzt wissen wir alle, dass es im Internet unzählige verschiedene Plattformen zum Erstellen von Websites gibt Aber letztendlich gibt es fünf Hauptplattformen: Word Press, Square Space, Wicks, Shopify und natürlich Webflow Dies basiert auf meinen Erfahrungen mit der Nutzung verschiedener Plattformen zur Erstellung von Websites den letzten zehn Jahren, in denen ich meine Agentur Clementine House in Brannan besaß Jetzt, wo ich diese verschiedenen Plattformen genutzt habe, habe ich die Erfahrung gemacht, dass ich mich letztendlich in wirklich schwierigen Situationen mit Kunden befand, weil mich die Plattform im Stich gelassen hat Und was ich in dieser Lektion mit Ihnen teilen möchte , ist nur meine persönliche Erfahrung, basierend auf all den verschiedenen Plattformen , die ich verwendet habe, und warum einige gut sind und warum andere nicht so gut sind. Jetzt möchte ich mit WordPress beginnen, weil es WordPress schon sehr, sehr lange gibt. Und letztendlich ist es die älteste aller Plattformen zum Erstellen von Websites, die es gibt. Das bedeutet letztendlich, dass Plattform, wissen Sie, von einer Vielzahl von Menschen genutzt wird. Aber die Realität ist, dass das aus Sicht der Wartung das Größte war, was mich von WordPress abgeschreckt Der Grund dafür ist, etwas zu ändern , das sehr einfach ist Man muss vielleicht zehn verschiedene Schaltflächen anklicken und es dann ändern und dann rausgehen und es dann speichern und es dann mit verschiedenen Plugins und vielen anderen chaotischen Dingen aktualisieren , was die Verwaltung zu einem echten Aufwand macht Wenn Sie also die Website wirklich konsistent und immer wieder verwalten müssen die Website wirklich konsistent , brauchen Sie viel Zeit, um etwas zu ändern, das lohnt sich für mich nicht wirklich Ich möchte etwas, das mir viel Zeit spart , das wirklich mühelos zu bedienen ist und das auch keinen benutzerdefinierten Code erfordert , um die Website zu erstellen und etwas zu bearbeiten, weil ja, Sie können vorgefertigte Themes verwenden, bei denen Sie es einfach in die WordPress-Website einfügen können , und es ist letztendlich startklar, und Sie können einfach den Text ändern. Aber das, was Sie auf dieser bestimmten Plattform tun können, ist sehr restriktiv was Sie auf dieser bestimmten Plattform tun können, Wenn Sie beispielsweise zwei verschiedene Websites haben, die genau dasselbe Thema verwenden, müssen Sie, um diese beiden Websites bearbeiten zu können, um diese beiden Websites bearbeiten zu können, den benutzerdefinierten Code kennen, damit sie einzigartig aussehen. Was ich an Web Floor liebe, ist die Tatsache, dass Sie keinen benutzerdefinierten Code benötigen. Ich persönlich kenne buchstäblich keine einzige Codezeile, aber ich verstehe, wie man die Webfloor-Plattform nutzt , damit sie die ganze Codierung und harte Arbeit für mich erledigt Als Nächstes stehen Square Space und Wicks an der Reihe, und der Grund, warum ich diese beiden zusammenfüge, hat mehrere Gründe In erster Linie reagiert Square Space also etwas besser als Wicks Ich habe viele Beispiele mit Wicks gesehen, denen die Website im Wesentlichen nicht sehr reaktionsschnell ist, und das bedeutet im Grunde, wenn ich mir eine Website auf meinem Desktop ansehe, dann sieht sie vielleicht gut aus Aber wenn ich es mir auf meinem Handy ansehe, sieht es nicht annähernd so gut Und das ist ein großes Problem. Und ich sage nicht , dass Sie auf Wicks keine responsive Website bekommen können , aber ich sage , dass es sehr schwierig ist , dies zu tun und zwar so, dass es tatsächlich gut aussieht Der Grund, warum ich Web Floor bevorzuge, ist, dass sie es sehr einfach machen und ihr System, das sicherstellt , dass die Website auf jedem einzelnen Gerät und jedem einzelnen Bildschirmtyp einheitlich aussieht jedem einzelnen Gerät und , mir die Gewissheit gibt , dass die Leute, die die von mir erstellten Websites tatsächlich ein großartiges Erlebnis haben werden, egal wo sie die Website aufrufen. Nun, eine Sache, die Square Space und Wicks gemeinsam haben , ist, dass es eine wirklich schreckliche Migration zur Suchmaschinenoptimierung gibt, zumindest meiner Ich habe vor vielen Jahren tonnenweise Websites auf Square Space und Wicks erstellt , bevor ich Web Floor entdeckt habe Und die Realität ist, dass ich es nie geschafft eine einzige Website auf Square Space oder Wicks auf die oberste Seite von Google zu Das lag einfach daran, dass der Code, der auf diesen speziellen Plattformen verwendet wird, manchmal zu kompliziert ist , als dass Google ihn verstehen könnte Zumindest wurde mir das gesagt, als ich mit einem SU-Experten sprach, der mir ein wenig über die verschiedenen Plattformen und deren Vor- und Nachteile erzählte . Webflow hat es mir jedoch sehr einfach gemacht, jede einzelne Website, die ich erstellt habe, auf die oberste Seite von Google oder ziemlich nah dran zu bringen jede einzelne Website, die ich erstellt habe, auf die oberste Seite von Google oder ziemlich nah dran zu Und das liegt einfach daran, sicherzustellen, dass die Blogbeiträge und alles, was ich tatsächlich in die Website eingefügt habe, richtig strukturiert sind, und Webflow macht das sehr einfach Die einzige andere Plattform zum Erstellen von Websites, die sich ein bisschen von Wordpress, Wicks und Square Space unterscheidet , ist letztendlich Shoppi Jetzt ist Shopper Fi eine Plattform, die sich ausschließlich auf E-Commerce konzentriert. Letztlich macht es also keinen Sinn, Shop fi zu verwenden , es sei denn, Sie verkaufen tatsächlich ein Produkt Jetzt muss ich Ihnen gegenüber völlig transparent sein. Es gibt Ihnen viele Daten, die Ihnen helfen, Ihre Website zu erstellen und sie im Laufe der Zeit ein bisschen besser zu machen. Die Software zur Verhaltensverfolgung, die ich Ihnen in Phase eins dieses Kurses gegeben habe, wird Ihnen jedoch die ich Ihnen in Phase eins dieses Kurses gegeben habe, buchstäblich dabei helfen genau das Gleiche zu erreichen. Der einzige Unterschied besteht darin, dass Sie tatsächlich die Maus des Benutzers sehen können , der sich tatsächlich auf Ihrer Website befindet, sodass Sie genau sehen können, was ihn zum Klicken bringt und was ihn dazu bringt, nicht zu klicken. können Sie buchstäblich so ziemlich genau das Gleiche erreichen Webflow können Sie buchstäblich so ziemlich genau das Gleiche erreichen. Der einzige Unterschied besteht darin , und eines der großen Dinge, die mich an Shopify manchmal wirklich nerven , ist die Tatsache, dass Shopify wiederum sehr restriktiv ist, ähnlich wie Wordpress und Wicks und Square Space aus Sie müssen in erster Linie rund 350$ bezahlen, um eine wirklich großartige Vorlage zu erhalten eine wirklich Und wenn Sie dann diese Vorlage bekommen, sieht sie gar nicht so gut aus Die meisten Websites sehen ziemlich launisch und sie scheinen nicht wirklich durch, und sie sehen nicht besonders einzigartig Dies kann letztendlich dazu führen, dass die meisten Marken sehr generisch aussehen Und so ziemlich das Gleiche. Und letztendlich es sich für mich einfach nicht gelohnt. Ich wollte eine Vorlage, mit der ich im Grunde meine eigenen kleinen, einzigartigen Wendungen hinzufügen und meinen Kunden wirklich ein einzigartiges Markenerlebnis bieten konnte meine eigenen kleinen, einzigartigen Wendungen hinzufügen und meinen Kunden wirklich ein einzigartiges Markenerlebnis bieten Und Web Floor hilft dir dabei. Und eine weitere Sache, die mich an Shop Offi wirklich geärgert hat, ist, dass unabhängig davon welche Mitgliedschaft oder welches Paket Sie bei Shop Offi wählen, sie Ihnen immer noch eine Transaktionsgebühr berechnen Jetzt hatte ich tatsächlich das Glück, den ganzen Schmerz auf mich nehmen zu müssen, jede einzelne Plattform auszuprobieren, sobald sie veröffentlicht wurden Glück, den ganzen Schmerz auf mich nehmen zu müssen jede einzelne Plattform auszuprobieren, sobald sie veröffentlicht Und um ehrlich zu sein, benutze ich Web Floor, seit ich benutze ich Web Floor, seit ich ein paar Jahren zum ersten Mal damit vertraut gemacht habe. Seitdem benutze ich es buchstäblich. Und jetzt werde ich buchstäblich gebeten, Websites für Kunden auf verschiedenen Plattformen zu erstellen , und ich bestehe darauf, nur auf Webflow aufzubauen, einfach weil wir dadurch eine Menge Zeit sparen wenn wir Websites für Kunden erstellen. Es hilft den Kunden, die Websites viel einfacher zu verwalten , spart Zeit und reduziert auch den Zeitaufwand, der benötigt wird, um sie darin zu schulen, die Website tatsächlich zu verwalten. Und weil wir die Websites so viel schneller erstellen können und um ehrlich zu sein, macht die Nutzung von Webflow einfach viel mehr Spaß. Wir können unglaublich aussehende, maßgeschneiderte Websites letztendlich für einen Bruchteil der Kosten erstellen letztendlich für einen Bruchteil der Kosten , als wenn wir auf Shopify, Wick, Square Base oder WordPress aufbauen würden Wick, Square Base oder WordPress Wie dem auch sei, ich verstehe, dass Sie die Entscheidung auf der Grundlage der für Sie am besten geeigneten Plattform treffen müssen, und ich respektiere jede Entscheidung, die Sie treffen, voll Ich kann nur sagen, dass ich jede einzelne der wichtigsten Online-Plattformen zum Erstellen von Websites ausprobiert habe , und Webflow ist jedes Mal auf Trumps Website gestoßen Es ist hauptsächlich auf die Freiheit zurückzuführen, die Sie aus gestalterischer Sicht haben , um wirklich etwas zu kreieren , das für Sie einzigartig ist Nicht nur das, es ist vor allem die Verwaltungszeit , eine unglaubliche Website zu bekommen und sie dann während der Woche so gut wie ohne Zeit zu verwalten während der Woche so gut wie ohne Zeit zu Das ist also das Wichtigste für mich persönlich. Ich bin mir nicht sicher, wie wichtig das für Sie ist, aber ich möchte in der Lage sein, alles zu erstellen , was ich mir vorstelle damit ich wirklich die Website erstellen kann , die am besten zur Marke passt. Und der zweite Vorteil für mich ist, dass ich beim Erstellen so viel Zeit wie möglich spare der Website Webflow wird tatsächlich automatisch aktualisiert Im Gegensatz zu WordPress beispielsweise, wenn Sie alle Ihre Plug-ins aktualisieren und sicherstellen müssen , dass alles immer noch funktioniert, erledigt Webflow alles komplett von selbst Ganz zu schweigen davon, dass Webflow auch einen unglaublichen Premium-Support bietet Wenn Sie sich bereits für die erste Phase des Kurses angemeldet haben , haben Sie Ihren kostenlosen VIP-Support bereits Und zu guter Letzt macht die Nutzung von Webflow einfach so viel Spaß. Es fühlt sich buchstäblich so immersiv an, und Sie können buchstäblich alles erstellen, was Sie wollen, sobald Sie den Dreh mit der Plattform verstanden Und es dauert nicht lange, und wir werden buchstäblich anfangen, uns an die Plattform und all die verschiedenen kleinen Tools zu gewöhnen , die Sie in den nächsten Lektionen verwenden können in den nächsten Lektionen verwenden Wie dem auch sei, ich freue mich sehr darauf, loszulegen und mit dem Aufbau Ihrer Website zu beginnen, also werde ich Sie in der nächsten Lektion sehen. 33. Webflow 101: Haltepunkte verstehen: Was ist Reaktionsfähigkeit einer Website? Nun, die Reaktionsfähigkeit einer Website ist im Grunde genommen die Website auf jedem Bildschirm und Gerät, das Sie sich vorstellen können, gut aussieht jedem Bildschirm und Gerät, das Sie sich vorstellen können Dazu gehören ein Desktop, ein mobiler Bildschirm, ein iPad, so ziemlich jeder Bildschirm, den Sie sich vorstellen können Nun, die Reaktionsfähigkeit von Websites mag ein bisschen beängstigend erscheinen, wenn Sie sie noch nie zuvor gemacht haben, aber sie ist wirklich einfach und sie wurde wirklich einfach gemacht, insbesondere im Webflow durch die Verwendung von Breakpoints Die Frage ist, was sind Breakpoints, wenn Sie nicht bereits wissen, was sie Nun, ein Breakpoint ist im Wesentlichen ein bestimmter Punkt in den Abmessungen der Website, an dem sie sich an einen anderen Bildschirm anpasst , um sicherzustellen, dass sie immer unglaublich aussieht Mach dir keine Sorgen. Wir werden sicherstellen , dass die gesamte Website, die Sie in diesem Kurs erstellen , auf jedem einzelnen Gerät vollständig responsiv ist , auf jedem einzelnen Gerät vollständig responsiv Ich werde Ihnen zeigen, wie das geht , und es ist ganz einfach. Aber in dieser Lektion möchte ich Ihnen nur zeigen, was ein Breakpoint ist und wie Sie verstehen, wie Sie Breakpoints einrichten , damit Sie wissen, was Sie später in Zukunft tun müssen Letztlich sollte der Breakpoint bereits in Ihrer Vorlage installiert sein, sodass Sie sich darüber keine Gedanken machen müssen Aber es ist einfach wirklich wichtig, dass du genau verstehst, was Breakpoints sind, damit du weißt, worauf du in Zukunft achten musst Schauen wir uns also ein paar Beispiele von Websites von Marken an , die wir kennen und lieben So können wir letztendlich genau verstehen, was Breakpoints sind und wie sie sich auf das Erlebnis auf der Website auswirken das Erlebnis auf der Website Schauen wir uns also die Tesla-Website an und sehen wir, wie ihre Website an verschiedene Geräte anpasst Wenn Sie also auf die Website gehen, können wir feststellen, dass sich die Dinge ein wenig ändern, wenn wir anfangen , die Größe des Bildschirms anzupassen . Sie können hier sehen, dass es einen Haltepunkt gibt, an dem sich die Navigationsleiste in eine Dropdownleiste verwandelt Wenn wir das einfach hierher nehmen und dann nach unten scrollen. Das ist ein Breakpoint Sie können sehen, dass dieser kleine Breakpoint entsteht, an dem die Navigationsleiste zu einem solchen Menü wird, das sehr einfach zu erkennen ist Nun, das gilt für so ziemlich jede Website da draußen Sie haben alle unterschiedliche Breakpoints. Mit dieser wirklich einfachen Methode können Sie sehen, wie Ihre Website wie ein Desktop aussehen wird Wie es auf einem iPad aussehen wird und dann auch, wie es auf einem Handy aussehen wird . Und mit dem Webflow ist es ganz einfach, Ihre Website auf jedem Gerät responsiv zu gestalten . Und wir werden Ihnen später im Kurs zeigen, wie das geht. Schauen wir uns jedoch ein anderes Beispiel auf der Website von Nike an , um zu sehen, wie ihre Website an bestimmten Bruchpunkten kaputt geht , um sich an die unterschiedlichen Gerätegrößen anzupassen . Hier haben wir zum Beispiel einen schönen großen Bildschirm, und wenn wir anfangen, ihn anzupassen, können Sie sehen, dass dieses spezielle Bild etwas kleiner wird. Und alles begann mit DAP More. Sie können sehen, dass die eigentliche Navigationsleiste etwas kleiner wird, und wir sehen hier, dass dies ein Unterbrechungspunkt ist , an dem sich das Menü ändert. Das eigentliche Bild ändert sich hier zu diesem Bild an diesem Haltepunkt, und wir sehen auch, dass die Menüleiste hier zu einem Hamburger-Menü Also auch hier folgt jede einzelne Website derselben Struktur Und in diesem Kurs zeigen wir Ihnen, wie Sie eine responsive Website erstellen. Sie sich also keine Sorgen, das ist alles sehr einfach und leicht zu verstehen, solange Sie die Schritte in diesem Kurs befolgen. Schauen wir uns nun zum Schluss die Apple-Website an. Nun, die Apple-Website, von der wir alle wissen, dass Apple unglaublich ist. verkaufen ihre Produkte und lassen alles einfach super sexy aussehen , sogar AirPods, oder? Wenn wir uns nun ihre eigentliche Website ansehen, können wir sehen, dass wir hier zum Beispiel sechs verschiedene Fenster haben, eins, zwei, drei, vier, fünf, sechs Schauen wir uns nun an, wie sie sich anpassen, wenn wir die Größe des Bildschirms ändern. Dies ist nur ein Beispiel , um Ihnen zu zeigen, wie Apple andere Arten von Abschnitten auf der Website erstellt. Jetzt sehen wir hier, wir haben einen Desktop, der toll aussieht. Jetzt, wo wir das anpassen und etwas kleiner machen, können Sie sehen, dass diese etwas zusammengedrückt werden, aber sie haben immer noch dieselbe Formation wir es dann noch weiter nach unten scrollen, warten wir auf den Breakpoint, und tatsächlich ist er da Wir können also sehen, dass innerhalb des Breakpoints der Breakpoint hier passiert, wo letztendlich der Text auf dem Design Sie können hier also die Größe des Textes sehen, und wenn er dann eine bestimmte Größe erreicht, ändert sich die Textgröße, weil er kleiner ist, es sich um ein kleineres ein kleineres Es ist eine kleinere Bildschirmgröße. Der Text muss also für die Bildschirmgröße relevant sein , auf der er angezeigt wird. Wenn wir jetzt noch weiter nach unten scrollen , können Sie sehen, dass sich etwas anderes ändern wird. Die tatsächliche Struktur jedes Quadrats. Wir haben tatsächlich geändert, wie die Quadrate strukturiert sind. Vorher hatten wir zum Beispiel eins, zwei, drei, vier, fünf, sechs in Zweierreihen. Aber wenn wir jetzt zur mobilen Version gehen, haben wir eins, zwei, drei, vier, fünf, sechs, aber in derselben Reihe. Jetzt ist jeder Block übereinander gestapelt , denn wenn wir ihn in der ursprünglichen Form hätten, die wir zuvor gezeigt haben und die für Tablet oder Desktop gemacht wurde , würde er nicht passen Da muss also dieser Breakpoint drin sein, damit sich der Inhalt an den Bildschirm des Mobiltelefons anpasst Jetzt können Sie genau den gleichen Ansatz für Ihre Website verwenden gleichen Ansatz für Ihre Website um zu testen, wie der Inhalt mit verschiedenen Breakpoints interagiert mit Mal sehen, ob Sie einen kleinen Vorgeschmack darauf haben, wie der Webflow das ganz einfach macht Sie können hier oben sehen, dass dies Ihre verschiedenen Breakpoints sind Das hier ist also dein Basis-Breakpoint. Das ist also letztendlich der Bildschirm mit der durchschnittlichsten Größe , den die Leute benutzen werden Sie dann an einen größeren Bildschirm heranarbeiten, sieht dieser letztendlich wie ein Fernseher aus, wenn die Website beispielsweise auf einem Fernseher oder sogar auf einem großen Bildschirm wie diesem angesehen wird . Und wenn Sie sich dann nach unten arbeiten, können Sie sehen, dass Sie ein Tablet, ein Telefon im Querformat und dann auch ein Portrait-Handy haben. Das Tolle am Webflow ist Wenn Sie etwas am Basispunkt ändern, wirkt sich das auch auf die anderen Elemente auf beiden Seiten aus. Es macht es also sehr einfach, sodass Sie die Website nicht auf jedem einzelnen Gerät neu gestalten müssen die Website nicht auf jedem einzelnen Gerät Sie müssen es einfach sofort ändern und dann die Dinge nach und nach anpassen , damit die Website absolut perfekt aussieht , egal auf welchem Gerät Sie sie betrachten Wie dem auch sei, wir werden uns sehr bald mit der Erstellung Ihrer Website befassen . Ich freue mich darauf, Sie in der nächsten Lektion zu sehen. Ich werde dich dort sehen. 34. Webflow 101: Das Box-Modell: Okay, was ist das Box-Modell , wenn es um Webfloor geht Nun, wenn Sie sich die vorherige Lektion ansehen, wissen Sie, dass ich die Sektion, den Container und den Diblock zu einem einzigen System zusammenfüge Container und den Diblock zu einem einzigen System Ich nenne das gerne das Heimsystem, denn wenn Sie sich das so vorstellen , dass Land der Abschnitt, der Container das Haus und dann die Div-Blöcke die verschiedenen Räume innerhalb dieses Hauses sind, können Sie sich sehr schnell ein Bild davon machen, wie jedes Element richtig verwendet wird können Sie sich sehr schnell ein Bild davon wie jedes Element richtig verwendet Lassen Sie mich diesen Abschnitt mit den Preisen auf meiner Website kurz erläutern , um Ihnen zu zeigen, was ich meine. Nun, dieser Abschnitt ist eigentlich ziemlich kompliziert, und ich habe ein bisschen Zeit gebraucht, um ihn zu erstellen. Nun, du Mann musst so etwas nie bauen. Aber wenn Sie das tun, lassen Sie es mich wissen und ich helfe und unterstütze Sie gerne. Was Sie jetzt sehen können, ist, dass in jedem einzelnen DIN-Block diese DI-Blöcke in Form eines Rasters angeordnet sind, das wir etwas später im Kurs behandeln werden . Aber jeder einzelne Di-Block und Grid sind innerhalb eines Containers strukturiert, und dann wird dieser Container innerhalb eines Abschnitts strukturiert. Wie Sie also sehen können, können Sie, wenn Sie Abschnitte als Land, Container als Zuhause und dann Div-Blöcke innerhalb des Containers verwenden Container als Zuhause und dann Div-Blöcke innerhalb , um mehr Struktur zu schaffen, sehr reaktionsschnelle Websites erstellen , die es Ihnen ermöglichen, wirklich eine Website zu erstellen, die professionell aussieht und sich auch so anfühlt, egal wo Ihr Betrachter sie betrachtet. Wenn Sie also immer daran denken, Abschnitte, Container und dI-Blöcke auf diese Weise zu verwenden , haben Sie immer eine gut strukturierte Website, die auf jedem Gerät, auf dem der Betrachter sie sehen kann , responsiv sein jedem Gerät, auf dem der Betrachter sie sehen kann , responsiv kann. Schauen wir uns ein anderes Beispiel an , um wirklich zu verdeutlichen, wie wichtig es ist, die Box-Methode zu verwenden und letztendlich Abschnitte, Container und Tauchblöcke auf diese Weise zu verwenden. Wie Sie hier sehen können, haben wir also einen Abschnitt. Nun, in diesem Abschnitt haben wir einen Container, sich innerhalb des Abschnitts befindet , der sich im Hauptteil befindet, und dann haben wir innerhalb dieses Containers auch DI-Blöcke. Diese Dip-Blöcke werden also unterschiedlich genannt, weil ihnen andere Funktionen verbunden sind? Du weißt noch nicht einmal von diesem DH, aber es ist genau der gleiche Ansatz. Wir haben Tauchblöcke im Inneren des Containers, und der Behälter befindet sich innerhalb der Sektion. Indem Sie die Struktur erstellen, stellen Sie sicher, dass jede einzelne Website, die Sie erstellen und jeder Abschnitt, den Sie erstellen, richtig strukturiert ist. Und wenn Sie Ihre Website richtig strukturieren, können Sie effektive Breakpoints innerhalb Ihrer Website erstellen , um sicherzustellen, dass Ihre Website immer fantastisch aussieht, egal auf welchem Gerät sie angesehen wird . den folgenden Lektionen werden wir nun DI-Blöcke, Container und Abschnitte verwenden In den folgenden Lektionen werden wir nun DI-Blöcke, Container und Abschnitte verwenden. Machen Sie sich also keine Sorgen, wenn es noch keinen vollständigen Sinn ergibt? Wir werden sehr bald alles behandeln. 35. Webflow 101: Abschnitte: In den nächsten Lektionen werden wir Abschnitte, Dip-Blöcke und Container verwenden , um letztendlich etwas wirklich Einfaches wie dieses zu erstellen Jetzt werde ich Ihnen jeden einzelnen Schritt des Prozesses zeigen , damit Sie ihn verfolgen können. Ich würde es wirklich begrüßen, wenn Sie mir den Kurs wirklich folgen , damit Sie genau wissen, wie es sich anfühlt, etwas wirklich Einfaches wie diesen Abschnitt hier zu erstellen. Warum fangen wir an? Nun, wir beginnen immer damit, einen Abschnitt hinzuzufügen, also würden wir einfach hier einen Abschnitt hinzufügen und ihn nach unten ziehen, und Sie sehen die blaue Linie unten, dort wird der Abschnitt landen. Also lassen wir es fallen und Sie können sehen, dass wir jetzt einen Abschnitt haben. Schritt eins, fertig. In diesem Abschnitt müssen wir nun einen Container hinzufügen, da der Container es ermöglicht, dass der Inhalt in diesem Container jederzeit reagiert und die Dinge an ihrem Platz bleiben. Also, wie machen wir das? Nun, wir gehen wieder zur Plus-Box, dann fügen wir einen Container und wir legen den Container in den Bereich, Sie können hier sehen, er geht den Abschnitt und wir legen ihn hinein. Perfekt. Jetzt haben wir unseren Container und wir haben ihn in einem Abschnitt. Jetzt können wir sehen, dass alles in Ordnung ist. Wir wissen also, dass alles an seinem Platz ist. Warum ist oben und unten in diesem Abschnitt so viel Platz ? Warum sieht es so aus? Warum sieht unserer ziemlich flach aus? Nun, das alles läuft auf ein kleines Ding namens Padding hinaus, und Sie können Containern, Di-Blöcken und Abschnitten Polsterung hinzufügen Di-Blöcken und Jetzt ist Padding bei der Entwicklung von Websites sehr wichtig , da Sie Platz zwischen verschiedenen Elementen schaffen können Und auch dies kann in Di-Blöcken, Containern oder Abschnitten verwendet werden in Di-Blöcken, Containern oder Abschnitten Aber für dieses spezielle Beispiel, da wir uns in dieser Lektion auf Abschnitte konzentrieren , wollten wir Ihnen zeigen, dass Hinzufügen von 75 Pixeln oben und unten beginnen, uns das Aussehen und das Gefühl zu geben wir in dem Abschnitt suchen , den wir zu erstellen versuchen Natürlich können Sie jetzt etwas mehr oder etwas weniger erstellen , aber das hängt alles davon ab, wie viel Speicherplatz Sie tatsächlich benötigen Aber wenn wir beim Kopieren eines bestimmten Abschnitts wirklich sehr spezifisch werden wollten , könnten wir einfach auf den Abschnitt klicken, und tatsächlich sind es 80 Pixel pro Seite und dann 30 Pixel auf beiden Seiten links und rechts. Wenn wir das also kopieren wollen, können wir einfach 80, 80 und dann 3030 wählen Jetzt hat unser Abschnitt genau die gleiche Polsterung wie der Abschnitt oben Aber warum sieht es immer noch anders aus? Nun, das alles hängt von den Elementen ab , die sich im Container befinden. Im Moment enthält dieser Container Elemente. Dieser ist leer. Der eigentliche Abschnitt wird also nicht organisch erweitert , um in die Elemente innerhalb des Abschnitts zu passen . Es ist einfach sehr flach Da ist nichts drin. Also müssen wir anfangen, Elemente hinzuzufügen, was wir in der nächsten Lektion tun werden. Nun, eine weitere Sache, die Sie sich vielleicht fragen, ist, warum unser Bereich weiß ist? Warum hat es nicht dieselbe Farbe wie dieses? Nun, im Allgemeinen ist jedes Mal, wenn Sie einer Website einen Abschnitt , einen Container, einen Tauchblock oder ein anderes Element hinzufügen Container, einen Tauchblock Website einen Abschnitt , einen Container, einen Tauchblock oder ein anderes Element standardmäßig weiß. Wie ändern wir also die Farbe? Nun, wirklich, wirklich einfach. Wenn Sie also genau dieselbe Farbe haben möchten, können wir auf diesen Abschnitt klicken dann hier zu diesem Bereich gehen. Dann stehlen wir einfach diesen Code, kopieren ihn und fügen ihn ein, wählen dann unseren Abschnitt aus und fügen diesen bestimmten Code in diesen Abschnitt ein. Und dann haben wir wie von Zauberhand genau den gleichen Abschnitt, die exakt gleiche Polsterung und die exakt gleiche Farbe In den nächsten Lektionen werden wir uns nun mit Containern und Bitblöcken befassen und diese spezielle kleine Übung, die wir gerade machen, beenden Übung, die wir gerade machen Wir sehen uns also in der nächsten Lektion. 36. Webflow 101: Container: Okay, wir haben unseren Abschnitt erstellt und jetzt haben wir hier einen Container , den wir mit bestimmten Elementen füllen müssen Um das zu tun, müssen wir anfangen, irgendeine Form von DID-Blöcken hinzuzufügen , um den Abschnitt letztendlich so zu organisieren er professionell aussieht und sich auch so anfühlt, und dass er im Grunde genau den gleichen Abschnitt kopiert , den wir hier haben. Nun, es gibt viele verschiedene Möglichkeiten , wie Sie diesen Abschnitt erstellen können, aber ich möchte Ihnen den besten und effizientesten Weg zeigen , den ich persönlich verwenden würde, wenn ich diese Website für einen Kunden erstellen würde. Und das erste, was ich tun würde, ist ein Raster hinzuzufügen. Jetzt wird das Raster wie folgt in die Spalte eingefügt. Und innerhalb des Rasters würde ich im Grunde den unteren Abschnitt löschen. Jetzt haben wir also nur die beiden oberen Abschnitte. Jetzt fange ich als Nächstes die Größe der Lücke hier zu ändern. Ich möchte also, dass die Dinge gut aneinandergereiht sind, sodass ein ausreichender Abstand Bild und Text getrennt werden können. Sobald ich damit zufrieden bin , drücke ich auf Fertig. Jetzt haben wir das Stromnetz und alles sieht sehr aufgeräumt und sehr nett Jetzt, an diesem Punkt, möchte ich anfangen, meine Div-Blöcke hinzuzufügen, und ich füge sie hinzu, indem ich sie einfach in das Grid lege Jetzt habe ich hier einen Diblock hinzugefügt. Jetzt füge ich einen kleinen Stilselektor hinzu und füge das als Das wird also mein Text sein. Und dann füge ich hier einen weiteren dI-Block hinzu , der mein Bild sein wird. Jetzt haben wir also Text, ein Bild in einem Raster, das sich dann in einem Container befindet , der sich dann in einem Abschnitt befindet. Okay, wir sind an einem Punkt angelangt, an dem wir unsere iD-Blöcke haben , wir haben sie benannt. Wir haben auch ein Gitter im Container in einem Abschnitt, und es sieht diesem Abschnitt sehr ähnlich, aber es fehlt eine Sache , und das sind die eigentlichen Elemente des Bildes, des Textes und der Schaltfläche. Jetzt gibt es zwei Möglichkeiten, wie wir das tun können. Die erste ist, dass wir einfach genau das Bild kopieren und in diesen speziellen DI-Block einfügen könnten . Das ist eine Möglichkeit, wie wir das machen können, aber wir wollen nicht faul sein. Also werde ich es dir Schritt für Schritt zeigen. Und um es ganz klar zu sagen, wir können das auch mit Text machen, wenn wir wollen. Es ist wirklich einfach. Alles, was Sie tun müssen, ist Kopieren und Einfügen, ähnlich wie beim Bearbeiten eines Word-Dokuments. Sie können das ausprobieren und ein bisschen experimentieren, aber so einfach ist es. Jetzt werde ich Ihnen zeigen, wie man es tatsächlich von Grund auf neu baut, damit Sie tatsächlich wissen, wie man es aus erster Hand baut Aber wenn Sie Web Flow verwenden, keine Angst davor, die Funktion zum Kopieren und Einfügen zu verwenden Dafür ist es da, um Ihnen Zeit und Energie zu sparen. Sie müssen also nicht immer wieder dasselbe tun . Aber lassen Sie uns diese drei Elemente loswerden, und wir sind wieder da, wo wir angefangen haben. Der nächste Schritt besteht also letztendlich darin, unsere beiden D-Blöcke zu füllen Und genau das werden wir in der nächsten Lektion tun . Wir sehen uns dort. 37. Webflow 101: Div-Blöcke: Okay, wir haben also unsere Sektion. Wir haben unseren Container. Wir haben unser Raster innerhalb des Containers und innerhalb des Rasters haben wir zwei D-Blöcke, einen benannten Text und einen benannten Bild. Lassen Sie uns nun mit dem Bildfeld beginnen um das zuerst zu erledigen, denn das ist am einfachsten. Um nun ein Bild zu diesem speziellen Feld hinzuzufügen, müssen wir zur kleinen Plus-Schaltfläche gehen, zum gehen und dann das Bild per Drag-Drop in dieses Feld ziehen. Jetzt haben wir also unseren dI-Block mit einem Bild darin. Um nun tatsächlich ein Bild zu dieser speziellen Bildbox hinzuzufügen , müssen wir auf das kleine Zahnrad klicken Gehe zur Auswahl eines Bildes. Und dann gelangen wir zu diesem Feld hier, in dem wir Dateien per Drag & Drop verschieben und verschiedene Bilder hinzufügen können. Nun, das ist nur Stock als Platzhalter, also werden wir etwas Interessanteres hinzufügen etwas Interessanteres Wenn wir also auf die Schaltfläche zum Hochladen klicken, wird unser Startbildschirm aufgerufen, und ich füge dieses wunderschöne Bild eines Schwans hinzu. Also klicken wir auf Öffnen Es fügt den Schwan hinzu, und sobald der Schwan geladen ist, wird er tatsächlich auf den Abschnitt angewendet Um ehrlich zu sein, bin ich mir nicht sicher, ob das ein Schwan oder eine Ente ist, aber sagen wir einfach, es ist ein sehr Okay. Also, jetzt haben wir unser Bildset. Wie fangen wir an, der anderen Seite des Abschnitts Text hinzuzufügen ? Nun, das ist wirklich einfach. Fangen wir von oben an und arbeiten uns nach unten vor. Wenn wir uns dieses Element hier ansehen, können Sie sehen, dass es die Typografieeinstellungen Aerial, 700 fett, die Größe 38 und die Höhe 44 verwendet die Typografieeinstellungen Aerial, 700 fett, die Größe 38 und die Höhe 44 verwendet Wir haben hier auch den Farbcode, nämlich 333, und seine Ausrichtung ist links Lassen Sie uns also eine Überschrift hinzufügen. Text zum Abschnitt. Und wenn wir schon dabei sind, können wir auch den Absatztext hinzufügen, weil dieser als Nächstes benötigt wird , also fügen wir ihn einfach, wie Sie sehen können, unter der blauen Linie hinzu. Und danach können wir auch die Schaltfläche hinzufügen, was auf diese Weise geschehen kann. Diese sehen momentan sehr ähnlich aus, aber wie können wir sie identisch aussehen lassen? Nun, das Erste, was wir tun müssen ist sicherzustellen, dass die Header dieselben Zeichen und Prinzipien verwenden, also Aerial 738 44, perfekt, genau dasselbe Wenn wir diesen Text also grundsätzlich kopieren und einfügen, sollte er identisch aussehen Sicher genug, das tut es. Aber lassen Sie uns das ändern, weil dieser Text ziemlich langweilig ist. Schwäne sind großartig. Ausruf, Mark. Fantastisch. Auch hier bin ich mir nicht sicher, ob das ein Schwan von Dock Ich stelle es nur da raus. Nun, was den nächsten Text angeht, können Sie sehen, dass das Arial 400 normal 14 20 ist Schauen wir uns das mal an, Aerial 400 normal 14 20. Nun, ich denke, wir sind uns alle einig , dass dies eine Menge Text zum Lesen ist, und selbst das ist für einen Benutzer ziemlich viel zu verdauen Also lass uns das so ein bisschen ändern und einfach Schwäne schön sind, aber manchmal auch ein bisschen frech sein können Nun, wir haben diesen Text, aber er ist ein bisschen klein Es ist ein bisschen schwierig , ihn auf dem Desktop zu lesen. Also lass es uns ein bisschen größer machen , damit wir das einfach hinzufügen können. Wir können es ein bisschen anders hinzufügen, was den Spaß angeht. Also lass uns das vielleicht als Monsa hinzufügen. Lass es uns ein bisschen leichter machen. Das sieht toll aus. Nun, wir werden uns etwas später mit Typografie befassen, aber ich möchte Ihnen nur einen kleinen Einblick geben, wie Sie Typografie verwenden können, um Ihre Inhalte wirklich zum Leuchten zu Wie Sie hier sehen können, ist es immer noch ein bisschen schwer zu lesen Was ich also im Grunde tun werde, ist, weil ich den Text vergrößert habe ich den Text vergrößert Ihre Höhe sollte etwa das 1,5-fache der Textgröße betragen. Also werde ich das auf 30 setzen, was ein bisschen mehr ergibt, aber ich werde das tatsächlich ein bisschen reduzieren und 28 daraus machen , weil ich denke , dass das besser ist. Okay, perfekt. Wie Sie sehen können, sieht unser Abschnitt jetzt etwas besser und er hat auch eine schöne Größe, was genau dem Beispiel entspricht , das wir zu Beginn der Lektion hatten. Eine Sache, die mich ein bisschen geärgert hat, ist die Tatsache, dass dieser Button eine wirklich seltsame Farbe Jetzt möchte ich es super sauber und super professionell machen , wie in diesem Beispiel hier. Also wie mache ich das? Nun, das Erste, was ich tun werde, ist auf die Schaltfläche selbst zu klicken. Dann muss ich auch sicherstellen, dass die Farbe genau dieselbe ist wie die Schaltfläche hier? Kopiere das und füge es hier ein. Das sollte also Arial 412 20 sein. Und wenn ich dann auf Join Swan Club klicke, kannst du sehen, dass es langsam viel mehr wie die Schaltfläche oben aussieht , aber es sieht immer noch ganz anders Warum sieht es dann anders aus? Nun, hier spielen hauptsächlich zwei Dinge eine Rolle. Die erste Sache ist der eigentliche Text selbst. Also, obwohl der Text genau derselbe ist , Aerial 400 normal 12 20 und dann Aerial 400 normal 12 20, gibt es immer noch etwas anderes. Und das ist in den weiteren Typoptionen. Hier, wo Sie sehen können, ist der Buchstabenabstand normal, der Buchstabenabstand hier ist zwei. Wenn wir hier also einen Buchstabenabstand von zwei hinzufügen, sieht es viel mehr wie im obigen Beispiel aus. Nun, es sieht sehr ähnlich aus, aber die beiden Tasten haben immer noch etwas ganz anderes . Warum ist das so? Ist es die Menge an Text? Nun, das könnte es sein, aber das ist nicht der Hauptfaktor. Der Hauptfaktor hier ist die Polsterung innerhalb des Buttons. Kannst du dich erinnern, als wir dem Bereich eine Polsterung hinzugefügt haben , um ihm ein wenig Platz zum Atmen zu geben Nun, es ist wirklich wichtig Sie das auch mit den Tasten tun, denn wo diese Schaltfläche derzeit einen Abstand von 15 und 9 hat, hat dieser Button einen Abstand von 12 und 25. Nun, das ist ein wirklich gutes Verhältnis für die meisten Tasten. Aber eines der wichtigsten Dinge, die Sie tun müssen, ist einfach sicherzustellen, dass Sie das gleiche Verhältnis beibehalten, aber Sie stellen sicher, dass es auf Ihrer gesamten Website konsistent ist . Nun, das ist ein wirklich großartiges Verhältnis, das man verwenden kann. Wenn wir dieses Verhältnis also grundsätzlich auf unserer gesamten Website verwenden , sollte es ziemlich konsistent aussehen? Und ziemlich nett anzusehen. Also buchstäblich 25, 12, 25 und 12. Sie können jetzt sehen, dass der Raum innerhalb der Taste viel Platz zum Atmen bietet. Es sieht ästhetisch viel ansprechender aus, und wir werden später im Kurs noch etwas ausführlicher auf die Erstellung von Schaltflächen eingehen später im Kurs noch etwas ausführlicher auf die Aber für dieses spezielle Beispiel wollte ich Ihnen nur zeigen, wie Sie eine wirklich einfache Schaltfläche erstellen und warum diese Schaltfläche ganz anders aussieht als diese Letztlich wollen wir unseren Benutzern das beste visuelle Erlebnis bieten. Und die Erstellung einer Schaltfläche, deren Anklicken tatsächlich sehr ansprechend aussieht , wird Ihnen helfen, eine bessere Leistung und damit eine bessere Konversionsrate auf Ihrer Website zu erzielen. Jetzt bin ich ziemlich zufrieden damit, wie die Dinge aussehen. Aber wenn Sie sich diesen Abschnitt und diesen Abschnitt hier ansehen, stimmt etwas immer noch nicht ganz. Nun, was hat es mit diesen speziellen Elementen auf sich, die wir vor ein paar Lektionen dargelegt haben, auf sich, die sich immer noch stark von diesen unterscheiden? Wenn Sie sich nun ein wenig Zeit nehmen, um darüber nachzudenken, können Sie feststellen, dass der Abstand zwischen der Überschrift und dem Text hier ziemlich identisch ist. Hier gibt es eine Marge von zehn. Nun, Abstand und Rand sind sehr unterschiedlich, und wir werden im Laufe des Kurses auf verschiedene Weise Aber Sie können hier sehen, dass der Abstand und der Rand für die Kopfzeile hier buchstäblich identisch sind, 20 oben und zehn unten Das sind jetzt ganz normale vier Header und du kannst sie nach Belieben anpassen In diesem speziellen Fall ist es jedoch nicht der Header, das ist hier das Problem. Das Problem ist der Text innerhalb des Absatzes, denn bei diesem speziellen Absatz haben wir einen Rand von 24 Pixeln Wie bei diesem Text haben wir nur einen Rand von zehn. Wenn wir also eine 24 ändern, sieht das jetzt viel besser aus, und wir haben einen schönen Abstand zwischen dem Absatz und der Schaltfläche und der Überschrift und dem Bild, aber da stimmt immer noch etwas nicht ganz. Und dieses Ding ist einfach der Ort, an dem diese Elemente platziert werden. Aus diesem Grund ist es sehr wichtig, dass ein Container, eine Sektion und der Di-Block gut zusammenarbeiten. Das liegt daran, dass wir diesen Text wie in diesem Beispiel nehmen und ihn in den Mittelpunkt des Bildes stellen wollten . Alles was wir tun müssen, ist zu diesem Abschnitt hier im Diblock zu gehen und auf die Mitte zu klicken Dadurch sieht es einfach viel sauberer, viel ausgeglichener und viel ansehnlicher Und deshalb ist es so wichtig, dass Abschnitte, Container und DI-Blöcke gut zusammenarbeiten Denn wenn wir diesen Diblock nicht hätten, könnten wir nicht kontrollieren wo wir die Elemente haben wollten Wir konnten es nur an einem einzigen Ort haben. Und wenn wir es in den Mittelpunkt stellen, sieht es viel ansprechender und professioneller Das deckt alles ab, was Abschnitte, Behälter und Dipblöcke betrifft , Behälter und Dipblöcke Jetzt werden wir weiteren Verlauf des Kurses darauf eingehen, während wir Ihre Website erstellen. Machen Sie sich also keine Sorgen. Aber das sollte Ihnen ein wirklich gutes Verständnis dafür vermitteln, wie Sie drei Elemente zusammen verwenden können , um eine wirklich gut strukturierte Website zu erstellen. Lassen Sie uns auf jeden Fall mit der nächsten Lektion des Kurses fortfahren. Ich werde dich bald sehen. 38. Webflow 101: Raster: Um dieses Raster zu erstellen, werden wir wie immer einen neuen Abschnitt erstellen Und innerhalb dieses Abschnitts werden wir diesen Abschnitt den Rasterabschnitt sexy nennen . Wenn wir nun in diesen Abschnitt gehen, werden wir wie gewohnt einen Container hinzufügen, und ähnlich wie zuvor, wenn Sie sich erinnern, hat er jetzt keine Polsterung mehr und keine wirkliche Vorstellung davon, wie groß er sein sollte Also werden wir ein bisschen Polsterung hinzufügen , ähnlich wie zuvor Das klingt ungefähr richtig. Auf beiden Seiten. Okay, jetzt haben wir ein bisschen Luft zum Atmen. Nun, was das Hinzufügen des Rasters angeht, müssen wir hier zuerst nach unten gehen und das Raster hier hinzufügen. Und das hat uns einige Optionen zur Auswahl gegeben. Jetzt können wir hier neue Rasterabschnitte hinzufügen, und wir können hier beispielsweise einen weiteren Rasterabschnitt hinzufügen. Aber ich möchte es auf nur zwei und vielleicht auf drei reduzieren. Okay? Perfekt. Nun noch einmal, wenn wir hier ein bisschen Breite schaffen wollen , dann können wir das tun. Und wenn wir hier ein bisschen Breite schaffen wollen, dann können wir das auch tun. Bitte denken Sie daran , dass Sie, wenn Sie die Größe dieser bestimmten Zeile ändern, auch die Größe dieser Zeile ändern müssen , damit sie an dieser Stelle verbunden ist. Sobald wir das Raster eingerichtet haben, gibt es ein paar verschiedene Möglichkeiten, wie wir Dinge zum Raster hinzufügen können. Eine Möglichkeit besteht nun darin, letztendlich wie zuvor vorzugehen und den DI-Block hinzuzufügen. Dann könnten wir einen weiteren Div-Block hinzufügen, und dann könnten wir einen weiteren Div-Block hinzufügen usw. Nun, das kann extrem mühsam werden. Was ich jetzt viel lieber tun würde, ist einfach diesen Diblock auszuwählen, ihn zu kopieren und dann auf das Raster zu drücken und dann einfach den gleichen Diblock in alle einzufügen Jetzt möchte ich Ihnen zeigen, wie Sie das so nutzen können, dass Sie wirklich viel Zeit und Energie sparen Deshalb möchte ich zum Beispiel ein kleines Raster erstellen, um einige Bilder zu präsentieren, die ich aufgenommen habe. Ich habe Fotounterricht genommen und möchte meine Fotografie der Welt zeigen. Ich habe also meinen ID-Block, was wirklich wichtig ist. Also nochmal, Abschnitt mit Di, denk immer dran, geh runter zum Bild. Perfekt. Ich habe also ein Bild in meinem dI-Block , der sich in meinem Grid befindet, und dann habe ich meinen Container , der sich in meinem Rasterbereich befindet. Nun, natürlich mein sexy Rasterbereich. Nun, wenn wir auf dieses Bild hier klicken und dann Bild auswählen. Dann laden wir alle Bilder hoch, die ich gespeichert habe. Dann fängt es an, all die verschiedenen Bilder hochzuladen , die ich habe Sobald ich das gespeichert habe, kann ich anfangen, mir ein bisschen Zeit zu sparen Und das kann ich tun, indem ich einfach den div-Block kopiere und einfüge und ihn mehrmals auf der Website einfüge Jetzt kann ich im Grunde zu jedem dieser Bilder gehen und dann ein anderes Bild auswählen , um es zu jedem Block hinzuzufügen Das spart mir jetzt eine Menge Zeit und Energie. Als ich anfange, meinem neuen Fotografie-Portfolio verschiedene Bilder hinzuzufügen . Eine Sache, die eigentlich ziemlich nervig ist, ist die Tatsache , dass meine Bilder nicht alle die gleiche Größe haben. Eines ist ein bisschen größer als das andere. Eines ist Landschaft und eines ist Porträt. Wie können wir das also beheben? Eine Möglichkeit, dies zu tun, besteht darin, einfach die Größe der tatsächlichen Bilder selbst zu ändern, aber es gibt auch eine andere Möglichkeit Und es erzeugt tatsächlich einen Rastereffekt, ohne die Rasterfunktion zu verwenden, was ich jetzt mit Ihnen durchgehen werde Nun, diese andere Möglichkeit besteht darin die Grid-Funktion einfach überhaupt nicht zu verwenden, sondern stattdessen einen Container zu verwenden. Also noch einmal, innerhalb des eigentlichen Abschnitts werden wir einen Container hinzufügen, und wir werden diesen Abschnitt entfernen , nur um Ihnen genau zu zeigen, was wir tun werden. Und innerhalb dieses Containers werden wir einen Rastereffekt hinzufügen. Und in diesem Container werden wir jetzt alle unsere Bilder hinzufügen. Also werden wir dieses hinzufügen. Dann werden wir diesen hinzufügen und dann diesen. Ich hatte heute nur drei Exemplare. Deshalb bin ich ein bisschen langsam als sonst. Perfekt. Jetzt haben wir also ein paar Bilder, alle immer noch unterschiedlich groß. Und lassen Sie uns die Ente auch noch hinzufügen , nur zur Sicherheit. Okay. Also, was der Container macht ist, dass er einfach alle Bilder übereinander stapelt , was, wissen Sie, beim besten Willen nicht schlecht aussieht , aber es sieht auch nicht gut aus Wie können wir es also reparieren und eine Art Rastereffekt erzeugen? Nun, eine Möglichkeit, das zu tun, besteht darin, hier zwei Punkte runterzugehen, wo Kolumnen stehen. Und wenn wir auf die Spalte mit dem Rastereffekt klicken, sich nicht um ein Raster handelt, denken Sie daran, dass es sich um einen echten Container handelt. Jetzt können Sie sehen, dass die Bilder standardmäßig alle automatisch übereinander gestapelt werden. Nun, es sieht nicht schlecht aus, aber es sieht nicht gerade gut aus, oder? Sie müssen weit nach unten scrollen, um alle Bilder zu sehen. Wie können wir das also beheben und es wie ein Raster aussehen lassen , ohne die Grid-Funktion zu verwenden? Nun, wir können etwas tun, indem wir dieses kleine Element verwenden , das hier als Spalteneffekt bezeichnet wird. Wir können also im Grunde den Container nehmen, zwei Spalten nach unten gehen und zwei eingeben. Da haben Sie es, Sie haben buchstäblich eine wirklich großartige, komprimierte Art , Ihre Bilder zu präsentieren. Jetzt könnten wir drei hinzufügen, wir könnten vier hinzufügen, aber ich denke, dass zwei tatsächlich viel besser aussehen. Jetzt haben wir tatsächlich ein bisschen Platz zwischen den beiden Spalten. Und was wir tun könnten, ist , zusätzlich ein bisschen Platz hinzuzufügen , wenn wir die Lücke etwas vergrößern wollen . Also fügen wir das als 20 hinzu, nur für das, was gemeint ist. Nun, das sieht toll aus, aber was ist unter jedem Bild? Warum ist unter jedem Bild kein Platz, um sie, du weißt schon, ein wenig aufzuteilen? Nun, das ist wirklich einfach, also müssen wir nur das Bild hinzufügen und ihm dann ein bisschen Polsterung 20 geben . Und da hast du's. Wir haben buchstäblich genau die gleiche Polsterung an der Seite wie für das Bild Und alles, was wir tun müssen, ist einfach die Bilder durchzugehen und dasselbe für jedes von ihnen zu tun, und schon können wir loslegen. Also da hast du's. Es gibt also zwei verschiedene Möglichkeiten, wie Sie Ihr Grid auf wirklich effektive Weise zu Ihrer Website hinzufügen können. Eines ist also etwas organisierter, und hier haben Sie letztendlich Bilder oder Elemente, die alle genau die gleiche Größe haben. Aber wenn sie nicht alle die gleiche Größe haben und Sie etwas suchen, das ein bisschen vielseitiger ist und letztendlich sogar etwas dynamischer sein kann , ist diese Option möglicherweise die beste Wahl für Sie. Wie dem auch sei, ich hoffe wirklich, dass Ihnen diese Lektion gefällt . Ich sehe dich in der nächsten. 39. Webflow 101: Blöcke verlinken: Okay, also wie fügt man eigentlich einen Link-Block hinzu? Nun, Linkblöcke sind sehr einfach. Sie sind so ziemlich wie Knöpfe abgesehen davon, dass sie nicht wie Knöpfe aussehen. Sie sehen nur aus wie ein bisschen Text. Eine Sache, die ich wirklich gerne tun würde, ist, Ihnen den Unterschied zwischen einem Link-Block und einer Schaltfläche zu zeigen . Also, wenn wir das hier nehmen, gibt mir das im Grunde einen kompletten Block, also könnte ich zum Beispiel dieses Bild hier einfügen, könnte ich zum Beispiel dieses Bild hier einfügen, und ein Link-Block verhält sich im Grunde ein bisschen wie ein dI-Block. Nun kann ein Link-Block auf viele verschiedene Arten verwendet werden. Die beiden wichtigsten Möglichkeiten, wie Sie einen Linkblock verwenden können, bestehen letztendlich darin letztendlich Leute dazu zu bringen, auf eine bestimmte Seite zu gehen. Also könnten wir das zum Beispiel hier platzieren , dann könnten wir dieses Bild hinzufügen. Also nehmen wir den dI-Block weg und fügen das Bild dem Link-Block hinzu. Und dann könnten wir im Grunde den Link-Block nehmen, wenn jemand auf dieses bestimmte Element oder diesen speziellen Link-Block klickt , wo früher der dI-Block war. Der dI-Block wird also im Grunde durch den Link-Block ersetzt. Letztlich können Sie eine weitere Domain hinzufügen oder Sie können Sie zu einer anderen Seite auf der Website weiterleiten, Sie können eine E-Mail hinzufügen, Sie können eine Telefonnummer hinzufügen. Sie können grundsätzlich jede Aktion ausführen lassen , wenn sie auf dieses bestimmte Element klicken. Das ist sehr nützlich, denn wenn Sie sie zum Beispiel auf die Swans-Seite oder auf Duck bringen möchten , was auch immer Sie bevorzugen, dann würde das Ganze sehr einfach sein, und es ist letztendlich versteckt, sodass Sie die Schaltfläche nicht wirklich sehen Nun, das kann auch aus einer Reihe anderer Gründe sehr nützlich Und eine der Möglichkeiten, wie ich den Link-Block gerne verwende, besteht darin, letztendlich eine fast unsichtbare Schaltfläche zu erstellen. Letztlich würde ich also den Link-Block nehmen ihn ganz unten hinzufügen. Lassen Sie mich das hier einfach hinzufügen, also kopieren, löschen, einfügen. Sie können hier sehen, wir haben den Linkblock dort. Jetzt möchte ich eine unsichtbare Schaltfläche für diesen speziellen Abschnitt erstellen . Also werde ich das kopieren und einfügen. Ich werde hier etwas Text hinzufügen. Okay. Wir werden diese Linie in ein paar Sekunden loswerden, und dann werde ich sie hier durchbohren Ich habe also genau die gleiche Funktion in diesem Link-Block, und ich kann auf genau dieselbe Seite verlinken, zu der die Schaltfläche führt, okay? Nun, wann würden wir einen Link-Block anstelle einer Schaltfläche für diesen speziellen Zweck verwenden ? Nun, wir würden ihn verwenden , wenn der eigentliche Button keine Priorität hat. Wenn wir zum Beispiel auf meine Website clementh.com gehen, dann hat diese Schaltfläche Priorität, weil sie mir tatsächlich hilft, Verkäufe und Leads zu generieren Aber wenn wir runtergehen, werden Sie feststellen , dass dies keine so große Priorität hat Das hat keine so große Priorität. Das hat keine so große Priorität, und das ist es auch nicht. Wenn wir ein bisschen weiter nach unten gehen, ist das eine Priorität, weil dadurch die Leute tatsächlich dem Ziel näher kommen, das meine Website zu erreichen versucht. Wenn wir nach unten gehen, ist das wieder ein sehr wichtiger Button. Das ist ein wichtiger Button , weil die Leute tatsächlich ein Beispiel für das herunterladen können , was wir ihnen anbieten werden. Das ist ziemlich wichtig, weil es dir alle Artikel zeigen kann, obwohl das auch als sekundärer Link-Block verwendet werden könnte . Außerdem ist dies ein weiterer wichtiger Button, um die Leute dazu zu bringen , dorthin zu gehen, wo ich sie haben möchte. Im Grunde sollte der Link-Block also für alle sekundären Schaltflächen verwendet werden , sofern sie nicht primär auf das Ziel ausgerichtet sind, das Ihr Unternehmen zu erreichen versucht. Und das Erste, damit es im Grunde genauso aussieht wie diese Schaltfläche, ist sicherzustellen, dass es dasselbe ist, es den gleichen Abstand hat. Und wir können auch sicherstellen, dass es dieselbe Farbe hat, denn im Moment hängt es im Grunde damit zusammen . Wenn wir also die Farbe ändern, ändert sich das, was perfekt aussieht. Und wenn wir dann einfach auf dieses kleine X hier klicken, wird die Unterstreichung weggenommen, wodurch es viel sauberer und professioneller aussieht viel sauberer und professioneller Wir haben also im Grunde den Button, also können wir das einfach hinauszögern Das ist schon linksbündig. Wenn wir jedoch etwas Polsterung hinzufügen und es ein wenig hervorheben wollen , dann können wir das ganz einfach tun Aber lassen wir es für den Moment einfach links ausgerichtet. Also, wenn ich mir das ansehe, sieht das nicht wirklich wie ein Knopf aus, oder? Wir wüssten nicht, dass es sich um eine Schaltfläche handelt, es sei denn, wir hätten tatsächlich hinter die Website geschaut oder wenn wir tatsächlich darauf geklickt und herausgefunden hätten, dass sie irgendwo hingehört Wie können wir das mithilfe der Linkblock-Funktion eher wie eine Schaltfläche aussehen lassen mithilfe der Linkblock-Funktion eher wie eine Schaltfläche Nun, das können wir tun, indem einfach so etwas verwenden, einen kleinen Pfeil. Sie können diese verwenden und sie online finden , indem Sie einfach nach Symbolen googeln, kopieren und einfügen, und ich zeige Ihnen, wo Sie sie finden können Wenn wir also buchstäblich zu unserem kleinen Linkblock gehen und diesen verwenden, sieht das jetzt viel mehr nach einem Button Nun, es gibt zahlreiche andere Möglichkeiten, wie wir das Ganze noch mehr wie einen Button aussehen lassen können . Und das können wir tun, indem einfach Dinge tun, wie zum Beispiel das Schweben zu Und wenn der Hover aktiviert ist, können wir die Opazität auf 40 reduzieren, würde ich sagen Und wenn wir dann wieder auf „Nein“ setzen , bedeutet das im Grunde, dass nichts passiert . Es steht einfach da. Es ist zu 100% ausgelastet. Aber wenn wir mit der Maus darüber fahren, wird es transparent, was dem Benutzer im Grunde sagt, wenn du darauf klickst, wird etwas passieren, okay? Wenn wir das also tun, ist das meiner Meinung nach ein bisschen zu schnell. Es sieht nicht wirklich ästhetisch ansprechend aus , oder? Es sieht irgendwie ein bisschen nervös und unprofessionell Also wie können wir das besser aussehen lassen? Nun, was wir tun können, ist, zu Übergängen überzugehen. Wir können uns alle Grundstücke ansehen und es dann etwas reibungsloser gestalten Je höher diese Zahl ist, desto glatter ist sie. Ungefähr 500 sollten okay sein. Und jetzt, wenn wir mit der Maus darüber fahren, wird es transparenter, und zwar auf glattere Weise Also das hat mir wirklich ziemlich gut getan. Aber ich möchte, dass es ein bisschen mehr wie ein Knopf aussieht. Ich möchte, dass die Leute wissen , dass du irgendwohin gehst, wenn du darauf klickst . Also wie können wir das machen? Wie können wir diese Schaltfläche noch mehr zu einer Schaltfläche machen und nicht nur zu einem Standardtext? Nun, weil es ein Link-Block und Sie das mit jedem Element machen können, aber weil es ein Link-Block ist, sieht es im Grunde wie ein Textblock aus, und er führt tatsächlich irgendwohin. Es ist also diskreter und ein bisschen sauberer. Was wir tun können, ist, zu Hover zurückzukehren. Wir können zur Two-D-Transformation gehen und diese Taste drücken, und das ist die Position der eigentlichen Elemente Also können wir das verschieben. Wir können viele tolle Sachen machen. Wir können es sogar nach links und rechts bewegen. Und ich denke tatsächlich, dass das eine wirklich gute Option sein könnte. Also lass uns das einfach um 15 nach links verschieben . Und wenn wir dann wieder hier sind, sollte es wegziehen. Jedes Mal, wenn wir darauf klicken, sieht das super professionell und sauber aus. Und das ist ein wirklich gutes Beispiel dafür, wie Button-Hierarchie bei der Gestaltung Ihrer Website sein kann wichtig die Button-Hierarchie bei der Gestaltung Ihrer Website sein kann. Sie können hier von diesen beiden Schaltflächen, der primären Schaltfläche und diesem kleinen Linkblock, sehen beiden Schaltflächen, der primären Schaltfläche , welche mehr hervorsticht? Derjenige, der einen soliden Hintergrund hat. Dieser ist viel diskreter und viel subtiler, sodass Sie die verschiedenen Arten von Tasten verwenden können, um sich stärker auf die bestimmten Tasten zu konzentrieren , die die Leute drücken sollen. Zusätzliche Schaltflächen oder Bonustasten sind letztendlich diejenigen, die das Benutzererlebnis verbessern werden, ähnlich wie beim Swan Club natürlich Sie können mit dieser Schaltfläche genau dasselbe tun , um sie nur ein wenig zum Leben zu erwecken , und hören Sie zu, wir werden in diesem Kurs auf viele wichtige und unterhaltsame Dinge wichtige und unterhaltsame Dinge eingehen , wenn wir beginnen, unsere Website gemeinsam zu erstellen Also zum Beispiel, wenn wir wieder den Mauszeiger bewegen und dann in den Hintergrund gehen Dann könnten wir das möglicherweise etwas dunkler machen. Wir könnten das auch erhöhen, vielleicht ein bisschen, damit wir es ein bisschen höher machen können ein bisschen höher machen Ja, das sieht gut aus. Geh hier hin. Und dann müssen wir nur noch alle Eigenschaften umstellen, es etwas reibungsloser machen, umstellen, es etwas reibungsloser machen denn 200 ist immer noch ein bisschen unruhig. Aber ungefähr 500 sind ungefähr richtig. 575 werden gut aussehen. Perfekt. Wenn wir jetzt mit der Maus drüber fahren, wird es dunkler und es erscheint ein bisschen glatt Es ist also nur eine wirklich subtile Kleinigkeit, aber sie macht den ganzen Unterschied Nun, nur um es allen klar zu machen , die sich immer noch fragen, ob das eine Schaltfläche ist, und das ist eine Taste oder nicht, dann können Sie im Grunde zu der Schaltfläche gehen, zu Pointer gehen und das Gleiche mit hier. Und wenn Sie dann letztendlich nur eine Vorschau Ihrer Website anzeigen, ist es jedes Mal, wenn Sie mit der Maus darüber fahren, unverkennbar eine Schaltfläche. Und die kleine Animation und die kleinen subtilen, Sie wissen schon, Unterschiede zwischen dem Zeitpunkt, an dem der Mauszeiger darüber bewegt wird, und dem Zeitpunkt, an dem es nicht wirklich dem Benutzer mit der geringstmöglichen Menge an mentalen Kalorien vermittelt wird, dass Sie im Begriff sind , eine Taste zu drücken und irgendwohin zu gehen Nun, ich weiß, dass wir in dieser speziellen Lektion einfach in die Linkbox eintauchen sollten , aber ich konnte nicht widerstehen, Ihnen ein paar kleine Tricks zu zeigen , um Ihre Website wirklich professionell zum Leben zu erwecken . In der nächsten Lektion wird es noch viel mehr geben, wo das herkam , also sehen wir uns dort. 40. Webflow 101: Buttons: Wie fügen wir also Schaltflächen zu unserer Website im Webflow hinzu? Nun, es ist super einfach. Also lass uns diesen Button hier nehmen und ihn einfach löschen. Tschüss. Gehen Sie dann einfach zur Plus-Taste und drücken Sie die Taste, ziehen Sie sie rüber und los geht's. Da ist dein Button. Nun, dieser spezielle Knopf sieht nicht wirklich gut aus, es sei denn, du magst Blau wirklich. Ich möchte Ihnen also zeigen, wie Sie die Schaltfläche so gestalten können, dass sie letztendlich schöner aussieht und zur Ästhetik Ihrer Marke und Website passt Was wir also tun können, ist, dass wir tatsächlich damit beginnen können , ein paar Dinge zu bearbeiten Das ist also nur die Bearbeitung der Polsterung auf beiden Seiten. Und wenn Sie nur Option oder Befehl auf Ihrer Tastatur wählen , können Sie beide gleichzeitig ändern Fügen wir den Seiten ein wenig Polsterung hinzu. 30 sieht gut aus. Jetzt fügen wir der Oberseite ein wenig Polsterung hinzu 12. Das sieht gut aus. Und dann sind zwei Dinge zu beachten : Wenn Sie die Schaltfläche bearbeiten, wird die Größe der Schaltfläche durch den Text im Inneren, die Größe des Textes, den Abstand zwischen den einzelnen Zeichen und auch durch den Abstand um den Text herum unterschieden durch den Text im Inneren, die Größe des Textes, den Abstand zwischen den einzelnen Zeichen , okay? Wenn wir also den Text in Swan Club ändern und ihn dann erneut auswählen, nach unten gehen und die technische Größe erhöhen, können Sie sehen, dass sich auch die Größe der Schaltfläche ändert Was Sie jetzt auch tun können, ist den Abstand auf zwei zu ändern zum Beispiel den Abstand auf zwei zu ändern, wodurch er etwas breiter wird, ein bisschen wie in diesem Beispiel hier unten. Aber was Sie dann auch tun können, und hier wird es sehr interessant, ist, dass Sie damit beginnen können, das Design und das Aussehen der Schaltfläche zu manipulieren und zu bearbeiten , indem Sie Dinge wie die Hintergrundfarbe verwenden , die hier ist, sodass ich buchstäblich jede beliebige Farbe verwenden kann indem Sie Dinge wie die Hintergrundfarbe verwenden, die hier ist, sodass ich buchstäblich jede beliebige Farbe verwenden kann. Lass uns einen schönen goldenen machen. Das sieht gut aus. Nett. Perfekt. Also, ich meine, das sieht ziemlich gut aus, so wie es ist. Aber lassen Sie uns vielleicht ein paar Kurven zur Schaltfläche hinzufügen. Lass es uns ein bisschen eleganter aussehen lassen. Sechs sieht gut aus. Und wenn Sie zum Beispiel verschiedene Ecken mit unterschiedlichen Stilen bearbeiten möchten, könnten Sie das tun, wodurch dieser Saugeffekt entsteht Nein, ich möchte, dass alle Kurven da sind, also werde ich das wieder ändern Jetzt sind Sie in einer Position, in Sie einen schönen Button haben, aber wie können Sie den Button vielleicht mit einer separaten Seite oder vielleicht mit einer Seite verknüpfen vielleicht mit einer separaten Seite oder vielleicht oder vielleicht, wenn Sie einen Button für Carnes machen wollen, den Swan Club anrufen Wie machst du das? Nun, alles was Sie tun müssen, ist auf die Schaltfläche zu klicken. Gehe zu den Einstellungen. Und in den Einstellungen sehen Sie einfach fünf Optionen. Das erste ist also Telefon. Wenn Sie also darauf klicken, können Sie einfach Ihre Telefonnummer hinzufügen. Die zweite Option ist jetzt E-Mail. Dies ist also im Grunde die E-Mail , zu der Sie über die Schaltfläche weitergeleitet werden sollen , um im Grunde eine E-Mail an diese bestimmte E-Mail-Adresse zu senden . Und dann haben Sie auch die Betreffleiste. Nun, die Betreffleiste wird im Grunde etwas in der Art von „Hey, Swan Club, ich möchte beitreten“ sagen „Hey, Swan Club, ich möchte beitreten Stück raus. Also das wird im Grunde als Betreffzeile auftauchen. Wenn ich auf diese Schaltfläche klicke und sie mit einer bestimmten E-Mail verbunden ist. Jetzt ist die nächste Option Seite. Was ich mit Seite meine, ist, wenn ich hier runtergehe und dies den Portfolio-Bereich nenne, kann ich diesen Bereich mit dem Portfolio-Bereich verknüpfen , sodass ich, wenn ich tatsächlich anfange, auf der Website zu stöbern einfach darauf klicken kann, und ich werde automatisch zu diesem Abschnitt weitergeleitet. Und lass uns zurückgehen. Nun, das ist eine separate Seite. Das ist zum Beispiel eine Seite, die sich intern auf Ihrer Website befindet. Nun, es ist wirklich wichtig, dass Sie dies verwenden , wenn Sie intern auf Ihrer Website verlinken intern auf Ihrer Website denn wenn Sie die URL verwenden, kann sich die URL in Zukunft ändern. Wenn sie sich also ändert, könnte die tatsächliche URL falsch sein, und es wird wahrscheinlich , wissen Sie, Ihre gesamte Website völlig durcheinander bringen, was nicht großartig ist. Also behalte das einfach im Hinterkopf. Wenn Sie außerhalb Ihrer Website verlinken, verwenden Sie diese Option, die URL-Option. Sie werden im Grunde auf eine Seite innerhalb Ihrer Website verlinken auf eine Seite innerhalb Ihrer Website Bleiben Sie also innerhalb Ihrer Domain verwenden Sie dann diese Option. Was wäre nun, wenn wir die Optionen Autos und E-Mail an uns hätten? Nun, wir hätten hier so die Option Cars. Dann könnten wir das buchstäblich einfach kopieren und einfügen. Wir haben jetzt also zwei Schaltflächen , die im Wesentlichen genau gleich sind. In diese Schaltfläche könnten wir im Wesentlichen E-Mails einfügen. Dann könnten wir das in den Einstellungen ändern. Zur E-Mail-Option. Schwäne auf swans.com. Dann hast du Schwäne. Oh, du bist ein Schwan Okay. Ausruf, Mark Okay. Jetzt haben wir also zwei Knöpfe. Eine dient dazu, diesen O-Club anzurufen, und die andere, um diesem einen Club eine E-Mail zu senden. Also, es sieht irgendwie okay aus, aber zwei Dinge stören mich wirklich Erstens gefällt mir nicht, wie diese Knöpfe übereinander gestapelt sind Wie können wir das also beheben? Wir können das mit einem dF-Block beheben. Also fügen wir den Dip-Block hinzu. Dann fügen wir das hinzu, kopieren es und fügen es ein. Jetzt kannst du sehen, dass sie nebeneinander liegen, was zehnmal besser aussieht, aber es gibt keine Lücke dazwischen, und das ist wirklich nervig. Was können wir also tun? Wir können ein bisschen Spielraum hinzufügen. Die inneren Elemente sind also Polsterung und die äußeren Elemente sind Rand Es hat also bereits einen Rand darunter, was großartig ist, aber den können wir tatsächlich wegnehmen, weil wir ihn eigentlich nicht benötigen, aber wir können rechts ein wenig Spielraum geben, und das hilft, die beiden Schaltflächen aufzuteilen Nun, diese beiden Knöpfe sehen toll aus. Aber etwas, das wirklich wichtig ist , ist eine Schaltflächenhierarchie . Wenn Sie diese spezielle Lektion in diesem Kurs bereits besucht haben , werden Sie verstehen, was ich meine. Wenn Sie die Schaltflächenhierarchie nicht verstehen, sollten Sie sich diese Lektion jetzt ansehen, denn sie wird für Sie sehr wertvoll sein. Also, was ich tun werde, ist, mir gefällt wie diese beiden Schaltflächen aussehen. Aber ich möchte, dass die Anrufertaste stärker und die E-Mail-Schaltfläche weniger auffällig ist, okay? Also werde ich diese beiden Tasten als etwas anderes bezeichnen . Der Grund, warum ich das auch mache. Lass es mich dir einfach zeigen, denn wenn ich den Hintergrund oder den Text auf dieser bestimmten Schaltfläche ändere, werden sie für beide geändert. Wenn ich jedoch diese Taste Taste vier, Carl uns und diese Schaltfläche E-Mails nenne , sind sie nicht mehr miteinander verbunden, okay? Sie können also grundsätzlich so gestaltet werden, wie ich es möchte. Also was ich tun kann ist , ich kann das nehmen, ein bisschen hinzufügen. Geh oder sogar das. Vollständig, nimm das weg. Und dann kann ich auch Text hinzufügen. Es sieht viel besser aus. Da hast du's. Das sieht zehnmal besser aus. Nun, was ich auch tun werde, ist, ein bisschen Ohrkontur darum herum hinzuzufügen ein bisschen Ohrkontur darum , damit es schön und gleichmäßig ist. Perfekt. Nun, wenn wir uns diesen speziellen Abschnitt ansehen, können wir sehen, dass hier ein knopfhoher Felsbrocken ist. Wir möchten, dass die Leute zuerst diesen Knopf drücken, aber wenn sie uns eine E-Mail schicken wollen, ihnen frei, das zu tun. Diese Option ist immer noch da. Aber wie können wir diese Knöpfe ein bisschen zum Leben erwecken? Denn wenn wir mit der Maus über sie fahren, passiert wirklich nichts. Wir sind quasi die kleine Hand, die hochkommt, um zu zeigen , dass es ein Knopf ist, aber sie macht nicht wirklich viel Es ist irgendwie nervig. Schauen wir uns an, wie wir diese zum Leben erwecken können. Und eine Möglichkeit, sie zum Leben zu erwecken, ist die Verwendung von Hover-Animationen, was wirklich einfach ist Sie können also dorthin gehen, Hover drücken, nach unten gehen, und Sie können letztendlich ein bisschen Pacity auf 65 wegnehmen, zu keinem zurückkehren, und wenn wir dann spielen, können Sie sehen, dass die Carlos-Taste eine kleine Funktion hat , die anzeigt, dass sie gedrückt wurde oder dass der Mauszeiger darüber bewegt wurde, Nun, es sieht nicht wirklich gut aus, wenn du es dir ansiehst. Es geht irgendwie sehr, sehr schnell auf 65 Pacity. Und das wollen wir nicht. Wir wollen, dass es schön und glatt ist. Wir hatten also einen Übergang, und wir haben das auf etwa 500 erhöht. Das wird viel reibungsloser aussehen. Siehst du das? Nein, es sieht viel professioneller und viel vertrauenswürdiger aus. Jetzt können wir noch einen Schritt weiter gehen. Wir können wieder zum Hover-Bereich gehen, immer noch auf diese Schaltfläche hier, die Anrufertaste Wir können zu zwei D-Transformationen übergehen. Wir können zu diesem Abschnitt gehen und ihn ein bisschen um vier nach oben verschieben Das sind nur vier Pixel. Jetzt kehren wir zu keinem zurück. Wir gehen darauf zurück. Und wir könnten das genauso gut auf alle Eigenschaften ändern. Also vorher war es nur auf Apcity eingestellt , jetzt sind es alle Eigenschaften Also alle Änderungen, die ich an dieser speziellen Schaltfläche vornehme, werden mit einer Lücke von 500 Millisekunden vorgenommen mit einer Lücke von 500 Millisekunden Also lass mich das einfach überprüfen. Dieser Knopf ist immer noch derselbe. Dieser Knopf. Ah, sieht gut aus. Schau, wie glatt das aussieht. Sehr nett. Also, wie können wir diesen Button animieren? Nun, es gibt ein paar verschiedene Möglichkeiten , wie wir das machen können Wenn wir wieder nach Hova gehen, gehen wir runter. Wir können sehen, dass der Text derzeit Gold wert ist. Lass uns das auf Weiß ändern. Und dann möchte ich den Hintergrund auf diese Farbe ändern. Sieht gut aus. möchte ich es etwas dunkler machen. Da haben wir's. Mal sehen, wie das aussieht. Ich werde das auch ändern. Perfekt. Jetzt werde ich zu keinem zurückkehren. Und dann werde ich zu den Übergängen übergehen, denk dran. Gehe zu allen Immobilien. Geh zu 500, 525 wäre gut. Okay. Also, wenn wir jetzt die beiden Knöpfe testen, sieht Call us gut aus. Eine E-Mail an uns sieht gut aus. Jetzt haben wir also zwei Schaltflächen , die vollständig animiert sind. Nun, das ist im Grunde genommen, weißt du, das Zusammenbringen verschiedener Animationen. Ich würde wirklich nicht empfehlen diese beiden Animationen nebeneinander zu verwenden. Da sollte ein gewisses Maß an Konsistenz vorhanden sein. Ich wollte dir nur zeigen, wie du in sehr kurzer Zeit wirklich tolle Buttons erstellen kannst . Und sobald Sie die allgemeinen Animationen für Ihre Schaltflächen haben, müssen Sie sie nur noch kopieren und einfügen, und Sie können diese speziellen Schaltflächen einfach an eine beliebige Stelle auf der Website kopieren . Und in Bezug auf Animationen wird es immer dasselbe sein, und Sie können sogar den Text ändern. Perfekt. Hoffentlich erhalten Sie damit einen kleinen Crashkurs in Bezug auf das Hinzufügen von Schaltflächen zu Ihrer Website Wir sehen uns also in der nächsten Lektion. Wir sehen uns dort. 41. Webflow 101: Typografie: Also Typografie auf Webfloor. Wie können wir unsere Typografie auf Webfloor erstellen? Wie können wir dafür sorgen, dass der Text auf unseren Websites unglaublich aussieht und sich auch so anfühlt, und gleichzeitig verstehen, wie wir ihn bearbeiten müssen um die perfekte Website zu erhalten, die wir uns wünschen? In dieser Lektion werden wir nun alles behandeln, was sich in dieser schönen kleinen Box befindet. Sie wissen also, wie man Typografie auf Webböden perfekt einsetzt. Also lass uns anfangen herumzuspielen. Also, was die Schrift angeht, das ist ziemlich selbsterklärend Sie können eine der Standardschriften auf Web Floor auswählen? Sie können aber auch benutzerdefinierte Schriftarten hinzufügen. Und das tun Sie, indem Sie einfach hier klicken, wodurch Sie direkt zum Bereich „Schriftarten“ im Einstellungsfenster gelangen wodurch Sie direkt zum . Anschließend müssen Sie nur Schriftdatei Ihrer Wahl hochladen, Speichern und dann auf Veröffentlichen und Veröffentlichen der Website klicken , und schon kann es losgehen. Nehmen wir zum Beispiel an, wir möchten dies in Mon Serrat ändern Perfekt. Das sieht toll aus , weil Schwäne toll sind Wenn wir das etwas größer machen wollten, könnten wir dieses Tool verwenden Das sind also im Wesentlichen die unterschiedlichen Gewichte, die wir für diese bestimmte Schriftart oder Schriftgröße haben. Nun, was Sie sehen werden, ist, dass nicht alle Schriften die gesamte Auswahl haben. Sie müssen sie also möglicherweise manuell hinzufügen , wenn Sie beispielsweise Aerial Thin benötigen , weil es im Webflow nicht standardmäßig verfügbar ist. Aber zum Glück für uns hat Monsat jedes Gewicht zur Verfügung, also wählen wir extra fett und schauen wir uns das an. Mmm Nicht schlecht. Dinge etwas interessanter, also können wir die Größe der Vorderseite hier bearbeiten, indem wir einfach nach oben und unten klicken, oder wir können sogar eine Zahl hineinschreiben, und wir können unterscheiden wie groß oder wie klein der eigentliche Text ist. Ich denke tatsächlich, dass das ein bisschen zu klein ist. Lass uns gehen, lass uns für 35 gehen. Perfekt. Nun, die Höhe ist ein bisschen anders. Die Höhe ist also, lass mich dir nur zeigen, weil die halben Flügel offensichtlich sind. Nun, die Höhe ist der kleine Abstand zwischen den Wortzeilen. Wenn wir also auf 40 gehen, werden Sie sehen, dass es etwas enger wird Wenn wir auf 60 gehen, werden Sie sehen, dass es viel breiter wird. Die beste Vorgehensweise ist ungefähr das 1,5-fache dessen, was Sie hier haben. Wenn das zum Beispiel 30 wäre wir das als 45 angeben, ist das ungefähr die richtige Menge an Platz, die Sie für Ihre Header benötigen Und das Gleiche gilt für Ihren Absatztext und auch für jeden anderen Text Wir haben also alle grundlegenden Dinge behandelt. Offensichtlich wissen wir, was Farbe ist, also spenden wir, um uns zu tief damit zu befassen. Die Ausrichtung ist ziemlich einfach. Es geht einfach darum, wie der Text innerhalb des Felds ausgerichtet ist , in dem Sie ihn haben. Wir können den Text kursiv machen. Wir können auch eine Linie durch den Text einfügen, ihn unter dem Text ausrichten und auch eine Linie über dem Text. Ich werde ganz ehrlich sein. Ich habe keine Ahnung, wann du eine Zeile über den Text setzen würdest, aber die Optionen dort, wenn du sie brauchst. Nun, diese zusätzlichen Einstellungen hier unten sind im Grunde in dieser eher typisierten Optionsleiste versteckt. Wenn wir also einfach darauf klicken, können wir anfangen, Dinge wie den Buchstabenabstand zu ändern , der im Grunde der Abstand zwischen den einzelnen Buchstaben im Feld ist . Dann müssen wir den Text einrücken. Wenn wir das also als zehn angeben, wird das erste Zeichen des Textes eingerückt wird das erste Zeichen des Textes eingerückt Nehmen wir zum Beispiel an, wir wollten einen leichten Einzug um fünf setzen, oder vielleicht wollen wir noch weiter beginnen . Wir setzen 30. Um ehrlich zu sein, benutze ich das nicht sehr oft, aber es ist da, wenn man es braucht. Nun, was Spalten angeht, wir haben das hier schon einmal benutzt. Was wir also tun können, ist, wenn wir das als zwei angeben, dann wird alles im Grunde in zwei separate Spalten aufgeteilt um es einfach ein bisschen fesselnder zu machen , nehme ich an Ich bin mir nicht sicher, wann Sie das für eine Überschrift verwenden würden , aber Sie können es zum Beispiel verwenden, wenn Sie den Effekt ein bisschen wie bei einer Zeitung erzeugen , wo Sie zwei Textzeilen haben und Sie zuerst die linke und dann die rechte lesen, das könnte sein, wenn das verwendet wird. Aber um ganz ehrlich zu sein, würde ich das überhaupt nicht für Überschriften verwenden Nun, das Tool mit Großbuchstaben ist wirklich wichtig, weil es Ihnen tatsächlich viel Zeit sparen kann Wenn Sie beispielsweise möchten, dass Ihre Überschriften alle groß geschrieben werden, können Sie dies drücken und das nach Belieben ändern Sie können auch sicherstellen , dass jedes erste Wort Sie können auch sicherstellen , dass jeder erste Buchstabe groß geschrieben wird. Selbst wenn ich die Buchstaben so eingegeben habe und diese Taste drücke, wird jedes einzelne Wort in diesem Satz automatisch groß geschrieben jedes einzelne Wort in Oder Sie können es natürlich auch einfach mit allen Kleinbuchstaben verwenden, was auch großartig ist Lassen Sie uns das einfach für eine Sekunde loswerden und wählen wir einfach Großschreibung, damit es ein bisschen besser aussieht Nun, diese kleine Funktion hier ist im Wesentlichen Richtung. Im Moment geht es also von links nach rechts, aber wenn ich das hier ändere, fängt es an, von rechts nach links zu gehen. Auch hier bin ich mir nicht sicher, wann Sie diese spezielle Funktion verwenden würden , aber sie ist da, wenn Sie sie benötigen. Wenn Sie die Lektion zur Reaktionsfähigkeit von Websites in diesem Kurs bereits gemacht haben , wissen Sie jetzt, was Breakpoints Falls nicht, ist ein Breakpoint im Grunde genommen der Moment, in dem der Bildschirm klein genug wird, zum Beispiel hier, wo die eigentlichen Zeilen an bestimmten Stellen, abhängig von der Größe des Bildschirms, auf dem Sie die Website betrachten , zu brechen beginnen abhängig von der Größe des Bildschirms, auf dem Sie die Website betrachten , Sie die Website betrachten Und das hat ein paar verschiedene Optionen. So gibt es zum Beispiel Break a, sodass im Grunde genommen jeder Buchstabe oder jedes Wort, je nach Größe, aufgeteilt werden kann , oder Sie können sogar Alles behalten auswählen, was im Grunde nur bedeutet, dass alles in einer Zeile bleibt und die Dinge nicht unterbrochen werden. Jetzt kannst du das pro Wort machen, oder du kannst das auch pro Zeile machen. Experimentieren Sie also ein bisschen damit, wenn Sie wirklich wollen, aber ich werde ganz ehrlich sein. Ich habe diese beiden Elemente nie in irgendwelchen Designs verwendet , die ich in den letzten zehn Jahren entworfen habe, sei es im Webflow oder auf einer anderen Plattform. Nun, was Rap angeht, ich bin selbst kein Rap-Fan. Ich bevorzuge Rega, aber ich kann sagen, dass ich in Bezug auf diese spezielle Funktion denke, dass Sie , wenn Sie sie verwenden , die Website möglicherweise etwas komplizierter machen die Website möglicherweise etwas komplizierter , als Sie sollten Und der Grund, warum ich das sage, ist, dass Sie den Text tatsächlich manuell in den Text selbst einwickeln manuell in den Text selbst Also könnte ich zum Beispiel „Großartig“ einpacken. Also ist es getrennt, und es ist eigentlich, weißt du, in sich geschlossen, dann könnte ich sogar einen kleinen Abstand von sechs und sechs setzen . Sieht gut aus. Nun, das sind 60 Schotten, also teilen wir das durch zehn Perfekt. Was wir dann meiner Meinung nach tun könnten, Mm. Interessant. Lass uns das auf Weiß verschieben. Okay, das können wir im Moment überhaupt nicht sehen, aber dann lasst uns dieses Gold stehlen und lasst uns diesen Hintergrund in Gold ändern. Oh mein Gott. Das sieht unglaublich aus. Und mit dieser speziellen Funktion können Sie viele kreative Dinge tun . Wenn Sie also einen beliebigen Text auswählen, können Sie im Wesentlichen einen Link hinzufügen, wenn Sie dies wirklich möchten. Ich bin mir nicht sicher, wie toll das aussehen würde oder wann Sie das tun würden, aber vielleicht können Sie sich als nützlich erweisen. Sie können das Paket mit Spam abwickeln, was wir hier im Grunde getan haben, und Sie können auch die Formatierung löschen. Wenn ich das zum Beispiel löschen und alles komplett löschen wollte, dann würde ich einfach darauf klicken und es wieder normal machen. Aber ich mag das irgendwie, also werde ich es so lassen, wie es ist. Wie dem auch sei, ich hoffe wirklich, dass Sie dadurch einen kleinen Einblick in die richtige Verwendung von Typografie im Webflow erhalten haben. Ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald 42. Webflow 101: Bilder: Okay, wir haben in diesem Kurs bereits Bilder hinzugefügt und ersetzt, aber ich wollte dir nur eine einzige Lektion widmen, um dir alles zu zeigen, was du über das Hinzufügen von Bildern auf Webfloor wissen musst über das Hinzufügen von Bildern auf Webfloor wissen weil es sehr einfach und leicht herauszufinden Wenn wir nun dieses spezielle Bild wegnehmen und löschen, was großartig ist, dann haben wir im Grunde nichts auf der rechten Seite, was genau das ist, was wir wollen Wie fügen wir also ein Bild hinzu? Nun, wir gehen hier zum kleinen Kreuz. Wir scrollen dann nach unten zur Bildleiste und fügen dort einfach unser Bild ein. Im Moment wir einfach ein Platzhalterbild, also haben wir eigentlich nichts , was wir jemandem zeigen könnten, was nicht gut ist, weil es nicht wirklich ein Bild Es ist nur ein Platzhalter. Wie fügen wir also ein Bild hinzu Nun, vielleicht ist es nur diese kleine Schaltfläche hier , auf der steht „Bild auswählen“. Wenn wir also darauf klicken, öffnet sich unsere Assets-Leiste hier auf der linken Seite, und dann müssen wir nur ein Bild auswählen, das wir wollen. Und hier, Presto, das Bild ist jetzt da. Nun, wie Sie hier sehen können, ist das Bild ein eigenes Element Wenn Sie also beispielsweise das Bild auswählen, können Sie dann zu Stil und Größe wechseln und die Hälfte der Bildgröße um 50% bis zur Hälfte hinzufügen. Bild wird auf diesem Desktop zwar zu 50% angezeigt , aber wenn wir uns für den Laptop entscheiden, im Grunde das Herzstück aller responsiven Funktionen im Webflow ist, werden Sie feststellen, dass das Bild momentan bei 100% oder automatisch ist . Wenn Sie jedoch zum großen Desktop zurückkehren, werden Sie feststellen, dass er immer noch auf 50 eingestellt ist. Also warum ist das so? Nun, der Grund dafür ist , dass wenn wir das zum Beispiel wegnehmen und es einfach wieder auf Auto setzen, dann ist es wieder so , wie wir es vorher hatten. Wenn wir jetzt zur Mitte zurückkehren, die der Kern ist, wenn alles, was auf der Webebene reagiert, wenn wir hier etwas mit dem kleinen Stern in der oberen rechten Ecke ändern, wird es automatisch alles nach links und alles nach rechts ändern, sodass es genau gleich ist. Und so können Sie ganz einfach responsive Websites im Web Floor erstellen . Wenn wir zum Beispiel hier weitermachen und den Wert auf 70% ändern würden, würde ich sehen, dass sich die Größe hier ändert, aber es ändert sich auch die Größe auf jedem anderen Gerät, aber es ändert sich auch die Größe auf jedem anderen Gerät, egal ob es größer oder noch kleiner ist. Was wäre, wenn wir wollten, dass es auf dieser speziellen Seite 70 ist, aber dann wollen wir, dass es auf Mobilgeräten 100 sind. Nun, wir können das hier einfach auswählen und auf 100% setzen. Und hier, Presto, es ist zurück. Und weil das am Ende der Reaktionsfähigkeit steht , können Sie im Grunde sicherstellen, dass Sie nur dieses spezielle Gerät bearbeiten Dies hat keine Auswirkungen auf andere Geräteeinstellungen auf der gesamten Website und deren Reaktionsfähigkeit Tun wir einfach so, als ob wir das Auto nehmen. Und wir nehmen das auch wieder in Ordnung. Was ist, wenn wir dieses Bild ändern wollen? Was ist, wenn wir es nicht mögen, wenn diese schönen Kinder angeln? Nun, wirklich einfach. Klicken Sie einfach auf das Zahnrad, um das Bild zu ersetzen, klicken Sie auf das neue Bild Und da hast du's. Wie dem auch sei, ich hoffe, Sie fanden diese Lektion hilfreich. Einwanderer fügen Bilder zum Webflow hinzu. Ich sehe dich in der nächsten Lektion. Wir sehen uns dort. 43. Webflow 101: Videos: Es gibt im Wesentlichen zwei Möglichkeiten, wie Sie Videos zum Webflow hinzufügen können , und ich möchte Ihnen zeigen, wie Das erste, was Sie tun müssen, ist, das Video tatsächlich zum Webflow hinzuzufügen. Als erstes gehen Sie also zu Media, Dragon Drop Video. Und dann sollte es mit den Videoeinstellungen erscheinen. Nun können Sie für die URL entweder Ihr Videovideo hinzufügen, was ich normalerweise bevorzuge weil es viel sauberer aussieht, oder Sie können einfach ein YouTube-Video hinzufügen, also die URL eingeben. Moderator, und das Video wird automatisch angezeigt. Was ich dort gerade gemacht habe, ist, dass ich im Grunde ein wenig mehr Breite hinzufügen musste ein wenig mehr Breite nur um das Video tatsächlich zu präsentieren. Also ungefähr 400 funktionieren perfekt dafür, und du kannst es dir ansehen. Und wenn wir uns die Website tatsächlich ansehen, können Sie sehen, dass das Video erscheint und mühelos abgespielt wird. Loggen Sie sich ein Gehen wir nun zu der anderen Möglichkeit, wie Sie letztendlich ein Video in Webflow hinzufügen können . Also hast du das hier. Wir werden die YouTube-Funktion direkt in den Hero Split integrieren. Und wieder werden wir diese 400 Pixel hinzufügen , die es zeigen, URL. Und das Tolle an dieser speziellen Funktion ist, dass Sie den Start hinzufügen können. Nehmen wir zum Beispiel an, wir wollten bei 1 Minute und 15 Sekunden beginnen . Sie können den Datenschutzmodus für die automatische Wiedergabe einstellen. Sie können Steuerelemente auch einblenden oder nicht anzeigen Sie können sie auch stummschalten. Und du kannst verwandte Videos auch auf den Kanal beschränken. Also dann, wenn wir das jetzt abspielen und Start rufen, CMS-Elemente EIN 150. Die CMS-Elemente haben eine unterschiedliche Perl-Farbe Und so fügen Sie letztendlich Videos zum Webfloor hinzu. Jetzt können Sie mithilfe der Hintergrundvideofunktion auch Videos zum Webfloor hinzufügen . Und der Weg, das zu tun , ist sehr einfach. In erster Linie benötigen Sie also einen Abschnitt , den wir hier hinzufügen können. Und in diesem Abschnitt werden wir die Hintergrundvideofunktion hinzufügen, die sich dort unten in den erweiterten Einstellungen befindet. Wie Sie hier sehen können, haben Sie letztendlich das Hintergrundvideo Sie müssen lediglich eine Videodatei hochladen. Denken Sie jetzt daran, dass Sie für ein Hintergrundvideo nur 30 Megabyte Speicherplatz zum Hochladen haben 30 Megabyte Speicherplatz für ein Hintergrundvideo nur 30 Megabyte Speicherplatz zum Hochladen Sie also in erster Linie sicher, dass das Video von hoher Qualität ist denn das Letzte, was Sie wollen, ist ein pixeliges Video, nur um zu zeigen, dass es Ihnen egal ist, was auf Ihrer Website ist Das wollen wir nicht. Aber zweitens müssen Sie sicherstellen, dass das Video kurz ist, weil dadurch die tatsächliche Größe der Datei viel kleiner bleibt und das Video reibungslos abgespielt werden kann. Jetzt kannst du wählen, ob du das Video loten möchtest, was ich empfehlen würde, das Video abzuspielen, was ich empfehlen würde, und auch eine Play- oder Pause-Taste hinzufügen, was ich nicht empfehlen würde. Sobald Sie das getan haben, können Sie einfach auf Play drücken und Ihr Video wird am unteren Bildschirmrand abgespielt. Sobald Sie das Hintergrundvideo eingerichtet haben, können Sie das Video tatsächlich so hinzufügen, und es kann eine Weile dauern, bis es geladen und formatiert ist. Sobald dies der Fall ist, wird Ihr Video automatisch abgespielt und es wird in einer Endlosschleife wiedergegeben, und es wird automatisch abgespielt, ohne dass Sie auch nur einen Finger rühren Sobald also jemand auf Ihre Website kommt, können Sie genau sehen, was das Video beinhaltet Nachdem es formatiert wurde, können Sie das Video hier sehen Schauen wir uns das im Player-Button an. kann hier sehen, dass das eigentliche Video ein bisschen pixelig ist, aber das liegt einfach daran, dass ich eine Datei heruntergeladen habe, die nur 11 Megabyte groß war Wenn du eine Datei heruntergeladen hast, die ein bisschen größer ist, dann sieht sie viel sauberer aus und sie wird mehr Pixel enthalten und sie wird qualitativ hochwertiger aussehen Nun, das Tolle an Hintergrundvideos ist der im Wesentlichen aktive Bereich, also könnte ich diesen Container tatsächlich zum Hintergrundvideo hinzufügen diesen Container tatsächlich zum Hintergrundvideo und ihn im Grunde so einrichten , dass alle meine Elemente da sind. Wenn ich das in einen Container lege und das Hintergrundvideo im Grunde wie einen Abschnitt behandle , dann kann ich im Grunde genau das Gleiche hier oben haben , aber mit einem Hintergrundvideo, das dahinter abgespielt wird. Jetzt bin ich mir nicht sicher, wie das aussehen wird. Das sieht vielleicht nicht sehr gut aus, aber wir können sicherlich das Potenzial erkennen ein Hintergrundvideo als Teil des Website-Designs zu verwenden. Nun, ich würde das nicht empfehlen. Ich denke tatsächlich, dass die Verwendung von Website-Videos in vielen Fällen nicht wirklich gut für Hintergründe ist . Es ist weitaus besser, das Video selbst hinzuzufügen, aber es ist da, wenn Sie es verwenden möchten. Es ist eine andere Art, sich auszudrücken, aber seien Sie vorsichtig, denn der Kontrast hier ist nicht großartig und es trägt nicht wirklich viel zur Benutzererfahrung bei. Und letztendlich verlangsamt es, wie Sie hier sehen können , die Website sogar um einiges. Nur weil das nicht schnell genug geladen wird, heißt das nicht, dass Sie es nicht trotzdem tun sollten. Ich hoffe wirklich, dass Ihnen diese spezielle Lektion in Bezug auf das Hinzufügen von Videos zum Webfloor gefallen hat diese spezielle Lektion in Bezug auf , aber wir sehen uns in der nächsten Lektion und ich kann es kaum erwarten, Sie dort zu sehen. 44. Webflow 101: Lottie-Animationen: Was sind Lotty-Animationen? Nun, kleine Animationen sind für eine Reihe verschiedener Dinge sehr nützlich, und ich möchte Ihnen eine der besten Möglichkeiten zeigen, sie in Ihrem Website-Design zu verwenden Nun, um Ihrer Website eine Menge Animationen hinzuzufügen, ist es wirklich, wirklich einfach Und alles, was Sie tun müssen, ist einfach einen neuen Abschnitt zu erstellen , der hier unten aufgeführt wird. Und um Ihrer Website eine Menge Animationen hinzuzufügen, müssen Sie lediglich einen Container haben, der hier ist. Und in diesem Container werden wir Ihren DI-Block hinzufügen. Das ist nicht in den Container gegangen. Lassen Sie uns das einfach kopieren und dort einfügen, sodass wir den Diff-Block finden , der sich im Container Dann fügen wir innerhalb des Di-Blocks unsere Lottie-Animation hinzu Das ist also die Lottie-Animation hier. Okay, das hat also nicht funktioniert. Also lass uns das kopieren und einfügen. Fügen Sie das dann in den Diff-Block ein. Also los geht's. Wir haben also unsere vielen Animationen in einem Diff-Block innerhalb eines Containers, sich innerhalb der Sektion In Bezug auf eine Lotty-Animation ist das genau dasselbe wie das Hinzufügen eines Bildes oder eines Videos Du drückst einfach auf das kleine Zahnrad. Du würdest die Lotty-Sequenz durch eine neue Lotty-Sequenz ersetzen , und ich werde dir gleich zeigen, wo du die herbekommst Und dann sagst du im Grunde nur die eingebaute Dauer, dann würdest du einfach sehen, wie lange sie eigentlich dauern soll Sie drücken auch Loop, was bedeutet, dass es einfach ständig und immer wieder wiederholt wird , sodass es sehr nahtlos aussieht. Und dann können Sie auch hier drücken, um es rückwärts abzuspielen. Jetzt fragen Sie sich vielleicht, was eine Lotty-Animation eigentlich ist Nun, Ihre Animation ist im Wesentlichen eine wirklich flüssige Animation Sie können es wie ein Bild hinzufügen, aber es ist wie ein Geschenk, aber es ist eine sehr flüssige Animation, die letztendlich für immer andauern kann, ohne jemals anzuhalten. Und das kann sehr nützlich sein , wenn Sie zum Beispiel bestimmte Statistiken über Ihr Unternehmen oder vielleicht Kunden, mit denen Sie zusammengearbeitet haben, oder Veröffentlichungen, in denen Sie vorgestellt wurden, präsentieren möchten zum Beispiel bestimmte Statistiken über Ihr Unternehmen oder vielleicht Kunden, Ihr Unternehmen oder vielleicht Kunden mit denen Sie zusammengearbeitet haben, oder Veröffentlichungen, in denen Sie vorgestellt wurden , denn das auf Ihrer Website in Form einer Lotty-Animation zu haben, kann superprofessionell und wirklich sauber wirken und es sieht einfach sehr gut aus. Lassen Sie mich Ihnen ein Beispiel für viele Animationen zeigen , die ich auf meiner Website verwende Das sind also im Wesentlichen zwei viele Animationen. Dieser fährt mit einer etwas schnelleren Geschwindigkeit und dieser hier mit einer langsameren Geschwindigkeit Und wie Sie sehen können, sieht es einfach super sauber und superprofessionell aus und hilft uns wirklich dabei, uns als Experten im Bereich Branding zu positionieren , indem es all die verschiedenen Marken präsentiert, die wir in den letzten Jahren entwickelt und kreiert haben den letzten Jahren entwickelt und kreiert Nun, wo kann man eigentlich viele Animationen bekommen? Oder kannst du sogar selbst eine erstellen? Die Wahrheit ist, dass Sie selbst eine erstellen können , wenn Sie das wirklich wollen. Nun, ich persönlich weiß nicht, wie man das macht, aber ich weiß, wo man viele Animationen superbillig bekommt. kann man also zunächst eine Menge Animationen Auf Websites wie Fiber kann man also zunächst eine Menge Animationen für 15$ Sie können sie sogar kostenlos bekommen sogar billig, um ehrlich zu sein, sie kosten 5$, was wirklich, wirklich großartig ist Und alles, was Sie tun müssen, ist ihnen einfach genau zu sagen, was Sie wollen, ihnen alle Dateien zu geben, und sie sollten es für Sie herausfinden können Und alles, was Sie tun müssen, sobald Sie Ihre Datei haben, ist sie einfach auf die Website hochzuladen, indem Sie einfach auf das Zahnrad klicken, Sequenzen ersetzen, und die LotTI-Sequenz sollte hier sein und sie sollte hier hochgeladen werden Jetzt liegen viele Animationen in Form von JSN-Dateien vor. Wenn Sie also die JSN-Datei von jemandem von Fiber oder einem anderen Designer bekommen können , vielleicht kennen Sie jemanden oder Sie haben jemanden in Ihrer Familie, sobald Sie diese JSO-Datei haben, fügen Sie sie einfach zu Ihrer Website als ob es ein Bild wäre, und sobald Sie Ihre Website tatsächlich veröffentlichen, wird sie automatisch abgespielt. Ich hoffe wirklich, dass Sie etwas Zeit finden, um in eine Lotti-Animation zu investieren, wenn sie zu Ihrer Website passt, aber ich hoffe, dass Sie diese Lektion hilfreich finden, und ich werde Sie in der nächsten sehen. 45. Webflow 101: Formulare: Wie erstellt man also ein Formular im Webflow? Jetzt kann ich Ihnen sagen, dass es sehr, sehr einfach ist. Ich werde dir in dieser Lektion genau zeigen , wie das geht. Wenn Sie beispielsweise ein Formular in einem Abschnitt erstellen möchten, müssen Sie zunächst zum Formularbereich wechseln, indem Sie auf das Pluszeichen klicken und dann das Formularblockelement hinzufügen, das Sie einfach dort einfügen würden. Und wie Sie hier sehen können, sieht es nicht gut aus. Ich werde das kopieren und in den DIF-Block einfügen . Und jetzt ist es zumindest zentriert. Nun, das ist der erste Schritt zur Erstellung eines Formulars. Sie müssen alles in einem Formularblock haben. Fügen Sie also zuerst den Formularblock hinzu, und dann können wir mit dem Aufbau beginnen. Jetzt können Sie jede Art von Formular erstellen, die Sie möchten. Und alles, was Sie zum Erstellen eines Formulars benötigen, befindet sich in dieser kleinen Box hier. Lassen Sie uns zum Beispiel tatsächlich jedes der Elemente in dieser speziellen Box verwenden , um Ihnen zu zeigen, wie Sie jedes Element verwenden. Also haben wir den Formularblock bereits verwendet. Jetzt fügen wir ein Label hinzu. Wenn wir also ein Label hinzufügen wollen, dann brauchen wir im Grunde etwas anderes, das wir dem Formularblock hinzufügen wollen. Fügen wir hier also diesen Textbereich hinzu , der nicht in das Feld gehört. Fügen wir also diese Kopie hinzu und fügen sie in das Formular ein. Perfekt. Und dann sollte die Schaltfläche „Senden“ unten sein, also fügen wir das hier hinzu. Perfekt. Also haben wir das hier hinzugefügt, was im Grunde ein Textbereich ist, der toll aussieht. Dann fügen wir ein Label hinzu, das hier ist. Fügen wir das über dem Textblock hinzu. Oh, das ist also darunter. Also lass uns das einfach darüber hinzufügen. Perfekt. Jetzt haben wir also ein zusätzliches Textfeld, unser E-Mail-Adressfeld und auch unser Namensfeld. Also lass uns das einfach hier machen und dieser Nachricht einen Namen geben. Perfekt. Nun, es sieht nicht gut aus, aber wir sind auf dem Weg dorthin. Wir machen Fortschritte. Also lasst uns einfach geduldig sein. Lassen Sie uns in die anderen Elemente eintauchen. Vielleicht fügen wir dort auch ein Kontrollkästchen hinzu. Und wir werden den Namen ändern , um Marketing-E-Mails zu aktivieren. Start angekreuzt, erforderlich. Legen Sie das ein wenig weg und fügen Sie etwas mehr Spielraum hinzu. Okay, die Marge funktioniert aus irgendeinem Grund nicht, und ich denke, das liegt daran, dass sie ein bisschen zu groß ist. Also werden wir das größer machen. Wir fügen ein bisschen Spielraum hinzu. Also 20 Dann fügen wir auch hier 20 hinzu. Da haben wir's. Jetzt haben wir also ein bisschen Luft zum Atmen. Jetzt gefällt mir nicht, wie Squash das ist. Es kommt nicht wirklich toll rüber, also werde ich auch 20 dazwischen hinzufügen Ich werde diese Schaltfläche zum Senden ändern, indem ich einfach darauf klicke, um eine Nachricht zu senden. Und dann ändere ich das in „Nachricht senden“. Da haben wir's. Das sieht also ein bisschen besser aus, aber es sieht immer noch sehr eng Also, wie können wir das beheben? Nun, wenn wir auf den Abschnitt drücken und dann vertikal drücken und ihn ausdehnen, sollte das funktionieren. Aber wenn wir dann zum DIV-Blockcontainer gehen, können wir anfangen, wirklich zu verstehen wie man die Dinge noch weiter ausdehnt. Da haben wir's. Also haben wir im Grunde einfach alle Einschränkungen aus dem Abschnittsblock entfernt, sodass das Formular vollständig erweitert werden kann, was viel besser aussieht. Also, ich mag das irgendwie, aber ich finde, dass diese Beschriftungen einfach nicht sehr sauber aussehen. Ich hätte sie lieber in den Boxen selbst, nur um dem Benutzer ein reibungsloseres Erlebnis zu bieten . Wie können wir das also tun? Nun, wir könnten es einfach löschen, dann auf das kleine Zahnrad klicken und dann einfach das Wort Name hier eintragen, was viel besser aussieht Lassen Sie uns dasselbe für die E-Mail-Adresse tun. Perfekt. Und dann machen wir dasselbe auch für die Nachricht. Perfekt. Dann können wir das löschen. Hervorragend. Das sieht so viel besser aus. Sobald wir das getan haben, fügen wir eine etwas größere Lücke hinzu. Sieht gut aus. Marketing-E-Mails. Da haben wir's. Das sieht also viel besser aus. Ich werde darüber einen Header hinzufügen , der sich nicht wirklich innerhalb des PHM-Blocks befinden muss , er muss sich nur darüber befinden, aber ich werde ihn in den Container einfügen , damit er tatsächlich mit den restlichen Elementen übereinstimmt Und ich denke, der beste Weg, das zu tun, ist, das einfach zu bekommen und es über dem PHM-Block zu machen Da haben wir's. Und dann möchte ich hier ein bisschen mehr Platz hinzufügen. Da haben wir's. Das sieht nicht schlecht aus. Das sieht gar nicht so schlecht aus. Der Namensbereich nervt mich ein bisschen. Was wäre, wenn wir Vor- und Nachnamen in den Formularblock eingeben könnten ? Wie würden wir das machen? Nun, es ist eigentlich ziemlich einfach. Der erste Weg, dies zu tun, besteht also darin, im Grunde, oder der beste Weg, sollte ich sagen, einen dI-Block hinzuzufügen. Dann hatten wir in diesem Di-Block , der sich derzeit hier befindet, ein Grid, und das ist hier. Also hatten wir das dort im Di-Block. Jetzt haben wir das Grid, und innerhalb dieses Rasters werden wir auch zwei neue dI-Blöcke hinzufügen. Denken Sie daran, dass iD-Blöcke nur die Räume im Haus sind. Also schaffen wir nur ein paar zusätzliche Räume im Haus, okay? Dann kopieren wir das einfach und fügen es ein. Perfekt. Eigentlich nein, lass uns nicht kopieren und einfügen. Lass es uns manuell eingeben. Machen wir es richtig und hören wir auf, faul zu sein, Scotty. Okay, jetzt haben wir alles da oben. Nun, was ich will, ist, dass ich ein Eingabefeld innerhalb des D-Blocks hinzufügen möchte. Perfekt. Jetzt füge ich ein weiteres Eingabefeld innerhalb des DI-Blocks hinzu. Hervorragend. Ziemlich zufrieden damit, um ehrlich zu sein. Okay. Ausgezeichnet. Also werde ich dieses Raster bearbeiten. Ich werde mir den Abstand hier ansehen und ihn etwas abschwächen, also gefällt mir das nicht, weil es zu groß ist. Und das sieht eigentlich ziemlich gut aus. Also werde ich das jetzt löschen. Also brauche ich das nicht mehr. Das ist da. Das ist da. Das ist da. Also werde ich das in Vorname ändern. Und ich erkläre anschließend, was der Name und der Platzhaltertext und der Unterschied zwischen diesen sind Aber im Moment konzentriere ich mich nur auf das Design. Okay, perfekt. Also haben wir das Formular jetzt so gut wie fertig. Nun, was die Verwendung des Formulars angeht, werde ich ein bisschen Polsterung hinzufügen, also werde ein bisschen Polsterung hinzufügen, ich hier vielleicht 15 und hier vielleicht 45 hinzufügen, also werde ich diesen Tauchblock nehmen und ihn im Grunde machen . Lass uns ihm eine andere Farbe geben Machen wir es. Werden wir wirklich wieder Gold verdienen? Warum nicht? Machen wir es wieder zu Gold. Perfekt. Wir machen das weiß. Und wir werden das weiß machen. Eigentlich nein. Lass uns das nicht tun. Lass uns ein richtig dunkles Gold draus machen. Okay. Das sieht nicht schlecht aus. Lassen Sie uns das einfach leicht beleuchten , weil wir uns nicht zu sehr auf Design konzentrieren. Ich möchte Ihnen nur zeigen, wie Sie tatsächlich einen Formularblock und ein Formular für Ihre Website erstellen . Wir haben also festgestellt, dass es ziemlich gut aussieht, aber was mich nervt, ist, dass der Abstand zwischen diesen beiden Elementen nicht derselbe ist wie diese. Also das nervt mich wirklich. Also, was ich tun möchte, ist, ins Netz zu gehen. Ich werde mir ein Grid ansehen. Also hier sind 16, da sind 16 Pixel zwischen den beiden Spalten, okay? Nun, ich könnte entweder das ändern oder ich kann den Abstand zwischen diesen Abschnitten ändern , was uns, wenn Sie das tun, ein wenig helfen sollte. Sache mit diesen ist, dass der beste Weg, das zu tun, vielleicht einfach darin besteht, es von mir zu machen, weil es schon einige Pixel gibt. Das sieht viel besser aus. Jetzt füge ich diesem Bild weitere sieben Pixel hinzu. Da haben wir es perfekt. Jetzt ist alles proportional. Hervorragend. Damit bin ich zufrieden. Fantastisch. Nun, was die Formatierung der verschiedenen Elemente innerhalb des Formulars angeht , müssen Sie nur sicherstellen dass, wenn Sie beispielsweise den Vornamenblock, den Nachnamenblock, die E-Mail-Adresse, die Textnachricht, das Nachrichtenfeld hinzufügen beispielsweise den Vornamenblock, den Nachnamenblock, die E-Mail-Adresse, die Textnachricht, , das hier ist, und dann natürlich das Opt-In für die Marketing-E-Mails. Sie müssen sicherstellen, dass, wenn Sie auf das Zahnrad klicken, diese benannt werden, denn wenn die Daten an Ihre E-Mail-Adresse gesendet werden, müssen Sie sicherstellen, dass sie beschriftet sind , denn wenn sie es nicht sind, erhalten Sie einfach die Informationen und Sie wissen nicht, was es ist, also wissen Sie nicht, ob es ihr Vorname ist, ob es ihr Nachname ist, ob es ihre Nachricht ist. Es ist also sehr wichtig, diese zu kennzeichnen. Der Platzhalter ist also der Text in der Box, wohingegen der Name tatsächlich in der E-Mail steht , die Sie erhalten, wenn sich jemand mit Ihnen in Verbindung setzt. Also überprüfen wir diesen Diese ist natürlich erforderlich, weil wir ihren Namen in Bezug auf diesen Namen wissen müssen , Nachname, aber das ist Name, das ist gut, und das ist eine erforderliche, perfekte E-Mail-Adresse. Okay, das ist gut. Und der Typ. Wir haben also fünf verschiedene Datentypen. Die erste ist einfach, das sind nur normale Buchstaben. Als nächstes kommt die E-Mail-Adresse. Das nächste ist ein Passwort. Das nächste ist Telefon, und das nächste ist nur eine Nummer. Okay? Abhängig von der Art der Daten, die Sie vom Benutzer oder vom Besucher der Website erhalten möchten, müssen Sie also Benutzer oder vom Besucher der Website erhalten möchten, die Art der Daten auswählen , zu deren Eingabe Sie die Person in dieses Element bringen möchten. Also, hier ist es zum Beispiel E-Mail, oben steht E-Mail, und es heißt E-Mail-Adresse, was perfekt ist. nun die Nachricht angeht, lassen Sie uns diese als letztes überprüfen. Also dieses Feld sagte immer noch. Also wollen wir nicht, dass es das sieht. Wir möchten , dass die Meldung erforderlich angezeigt wird. Schreiben Sie hier Ihre Nachricht. Das gefällt mir. Das ist der Platzhaltertext. Hervorragend. Jetzt sieht alles ziemlich gut aus, aber warum ist dieser ein bisschen verrückt geworden? Ich verstehe das nicht. Warum wird das ein bisschen verrückt? Lassen Sie uns es aktualisieren und sehen, was passiert. Okay, also alles scheint in Ordnung zu sein. Also können wir das tatsächlich überprüfen. Wir können dieses Formular tatsächlich überprüfen. Und bevor wir das Formular überprüfen, schauen wir uns einfach an, was draußen passiert. Okay. Also Namensform. Wenn Sie zu einer anderen URL weiterleiten möchten , können Sie diese hier eingeben. In Bezug auf Aktionen ist dies die Standardeinstellung für den Webflow, und Sie müssten dies nur ändern, wenn Sie es mit einem E-Mail-Anbieter wie Mailchimp oder ähnlichem verknüpfen möchten Und wenn Sie es mit einem E-Mail-Anbieter wie Mailchip oder einer anderen E-Mail-basierten Plattform verbinden möchten E-Mail-Anbieter wie Mailchip oder einer , schauen Sie sich deren spezifische Tutorials an, die sie auf ihrer Website haben werden da jede Plattform etwas anders ist Also gehen wir da rein. Alles sieht gut aus. Wir werden ein Nachrichtenformular hinzufügen. P. Und dann werden wir einfach das Backend in den Einstellungen überprüfen. Okay, alles sieht gut aus. Alles sieht gut aus , alles sieht gut aus. Perfekt. Und wenn wir dann auf Erfolg klicken, wird dies angezeigt, wenn Ihnen ein erfolgreiches Formular übermittelt wird. Also, wir wollen das nur ändern weil es derzeit wirklich, wirklich, wirklich schlecht aussieht . Ändere das. Ändere den Text hier in Weiß. Perfekt. Und was passiert dann, wenn es nicht erfolgreich ist. Fehler. Perfekt. Das sieht gut aus. Fantastisch. Also wenn wir das tatsächlich ausprobieren, gehen wir da rein. Lassen Sie uns das tatsächlich ausziehen. Perfekt. Da haben wir's. Lass es uns versuchen. Okay, also Scott Lancaster, scott@gmail.com. Ich liebe Schwäne. Okay, melde dich an, sende mir eine Nachricht und es funktioniert nicht im Vorschaumodus Aber wenn das tatsächlich veröffentlicht wurde, was wir jetzt tun werden, und wenn wir es uns online ansehen, wenn wir es bis zum Ende gehen und es wirklich testen, und dann liebe ich Burgers Ausrufezeichen Eine Botschaft, Erfolg. Wir haben also buchstäblich in 10 Minuten, 15 Minuten ein Formular erstellt . Und weißt du, es ist nicht das am schlechtesten aussehende Formular der Welt. Natürlich können Sie sich mehr Zeit nehmen und sich nach Inspiration umschauen. Aber jetzt wissen Sie genau, wie Sie ein Formular bearbeiten und sogar ein Formular von Grund auf neu erstellen können. Wir haben es in den letzten zehn, 15 Minuten gerade selbst gemacht . Sie können ein Formular also von Grund auf neu erstellen, aber denken Sie auch daran, dass in den Vorlagen , die wir Ihnen im Rahmen dieses Kurses zur Verfügung stellen, bereits Formulare für Sie eingerichtet wurden, sodass Sie kein Formular von Grund auf neu erstellen müssen , wenn Sie nicht möchten. Wie dem auch sei, ich hoffe wirklich, dass Sie diese Lektion hilfreich finden, und ich wünsche Ihnen wirklich viel Spaß beim Erstellen Formularen für Ihre Website in der Zukunft. Ich freue mich darauf, Sie in der nächsten Lektion zu sehen. Wir sehen uns dort. 46. Webflow 101: Navigationsleiste: Okay, nehmen wir zum Beispiel an, Sie möchten Ihrer Website eine Navigationsleiste hinzufügen Auch hier gilt: In allen Vorlagen, die Sie in diesem Kurs verwenden wollten , sind bereits Navigationsleisten integriert. Wenn Sie Ihre Website jedoch von Grund auf neu erstellen möchten, finden Sie die Navigationsleiste hier unten. Und alles was Sie tun müssen, ist das einfach nach oben zu ziehen. Lass es los. Und hier, Presto, hast du deine Navigationsleiste Sobald Sie Ihre Navigationsleiste eingerichtet haben, müssen Sie sie nur noch stylen und beispielsweise Ihr Logo hinzufügen Also gehen wir hier zur kleinen Markenbox. Und was wir dann tun müssen, ist, dass wir das im Grunde nach Hause zurückbringen müssen. Also jedes Mal, wenn das gedrückt wird, egal auf welcher Seite es ist, egal auf welcher Seite es ist, bringt es uns automatisch zurück zur Startseite, was wir wollen, okay? Der nächste Schritt besteht also darin, die Navigationsleiste zu gestalten, also gehen wir zu Stil und klicken auf die Navigationsleiste. Wir gehen runter und machen es schön weiß. Also steche ich heraus. Perfekt. Außerdem möchte ich etwas mehr Platz und Polsterung zwischen Ober- und Unterseite hinzufügen mehr Platz und Polsterung zwischen Ober- und Unterseite Also möchte ich einfach die Option gedrückt halten und etwa acht Pixel Polsterung beiden Seiten etwa acht Pixel Polsterung hinzufügen, was gut aussieht Jetzt möchte ich hier ein Logo einfügen . Also, wie mache ich das? Also, gehen Sie zum Pluszeichen und klicken Sie auf das Bild. Füge das Bild in die Box ein. Wie Sie hier sehen können, befindet sich das Bild in der Link-Box für die Marke. Und dann füge ich jetzt nur noch das Logo hinzu. Nun, was ein Markenlogo angeht, da gibt es ein Logo, an dem ich schon seit geraumer Zeit arbeite , von einer kleinen Firma namens Amazon, die ich gerade aufbaue namens Amazon, die ich gerade aufbaue Ja, falls Sie davon gehört haben, dann herzlichen Glückwunsch. Ich glaube nicht, dass viele Leute von uns gehört haben, aber wir kommen langsam, aber sicher dorthin. Wie Sie sehen können, ist dieses Logo aus irgendeinem Grund irgendwie an der Oberseite des Containers angebracht . Und um ehrlich zu sein, bin ich mir nicht sicher warum. Was wir also tun können, um das zu beheben, ist einfach ein bisschen Polsterung hinzuzufügen, um das zu verringern Und der Presto, das Logo ist jetzt in der Mitte. Jetzt müssen wir nur noch den Nabel ändern. Zu diesem Zeitpunkt sollten Sie also wissen, welche Seiten Sie für Ihre Website benötigen So brauchen wir zum Beispiel keine Homepage, weil der Link unter dem Bild tatsächlich direkt zurück zur Startseite führt und uns immer dorthin bringt, egal welche Seite läuft. Wir benötigen also eigentlich keinen Homepage-Link unsere Navigationsoption. Also haben wir das über uns. Vielleicht brauchen wir einen Kontakt mit uns. Ja. Und dann glaube ich, dass wir Dienstleistungen brauchen. Jetzt möchte ich hier einen zusätzlichen Navigationslink für Dienste hinzufügen. Aber wie mache ich das? Nun, wir können das über uns einfach kopieren und einfügen. Ändern Sie das in Dienste und los geht's. So wie Sie hier sehen können. Es sieht ziemlich gut aus. Wir haben das Logo, das uns zurück zur Startseite bringt. Wir haben auch Informationen über uns, die Dienstleistungen und die Kontaktmöglichkeiten. Im Moment sieht es nicht schlecht aus, aber es sieht auch nicht besonders gut aus, oder? Was können wir also tun, um diese Elemente ein bisschen zum Leben zu erwecken? Nun, was wir tun könnten, ist die Farbe hier ein bisschen zu reduzieren, vielleicht auf das hier. Und dann können wir das einfach für jedes der Elemente kopieren. Und das ist quasi derselbe Ansatz wie Apple. Mit dieser Website, und ich finde es auch toll, wie sie das machen. Okay? Also haben wir die drei Optionen. Nun, vielleicht möchten wir ein bisschen Abstand zwischen ihnen hinzufügen, vielleicht auch 25, 25. Perfekt, es hat ein bisschen mehr Platz. Und wenn du dann mit der Maus drüber fährst, möchte ich, dass sie viel dunkler werden. Da haben wir's. Da sehe ich viel besser aus. Und wir drücken auch auf ausgewählt. Wenn es ausgewählt ist, wenn es gedrückt wird. Wir sollten auch zu dieser Option gehen. Perfekt. Sie können hier also sehen, wie es tatsächlich ein dunkleres Grau wird, wenn wir mit der Maus darüber fahren und auch wenn wir darauf drücken Alles, was wir tun müssen, ist, für jede dieser anderen Optionen genau dasselbe zu tun für jede dieser anderen Optionen genau dasselbe Fantastisch. Und dann müssen wir nur noch einmal hierher zurückkehren und Übergänge auswählen. Alle Eigenschaften. Etwa 425 sollten in Ordnung sein. Eigenschaften 425. Stellen Sie nur sicher, dass sie alle gleich sind damit alles schön und einheitlich aussieht, was großartig ist. Fantastisch. Und jetzt können Sie sehen, dass es super sauber und super professionell aussieht . Also haben sie es. Sie wissen, wie Sie mit minimalem Aufwand eine Navigationsleiste auf Ihrer Website ganz einfach Denken Sie daran, dass in den Vorlagen , die wir im Kurs anbieten, alle bereits über integrierte Navigationsleisten verfügen Sie müssen nicht all diese Arbeit machen, aber ich möchte nur sicherstellen, dass Sie die volle Möglichkeit haben , alles auf Ihrer Website von Grund auf neu zu erstellen Ihrer Website von Grund auf neu nur für den Fall, dass Sie möchten. Ich hoffe, Sie finden diese Lektion hilfreich, und wir sehen uns in der nächsten. 47. Webflow 101: Symbole: Okay, also wie können Sie Symbole erstellen, um Ihnen beim Erstellen Ihrer Website jede Menge Zeit zu sparen Nun, lass mich dir zeigen, wie. Also, dieses kleine Symbol hier, entschuldigen Sie das Wortspiel, ist im Grunde das, was wir gerne Symbole im Web Flow nennen Sie können sie also Komponenten nennen, oder Sie können sie Symbole nennen. Ich nenne sie gerne Symbole weil Sie damit bestimmte Elemente Ihrer Website mit minimalem Aufwand auf der gesamten Website wiederholen bestimmte Elemente Ihrer Website mit minimalem Aufwand auf der gesamten Website Und das Beste ist, wenn Sie ein Symbol wie dieses erstellen und letztendlich dieses Duplikat erstellen Wenn Sie dann etwas an diesem bestimmten Element ändern , wird es auf der gesamten Website geändert. Nun, das kann sehr nützlich sein, denn sehen wir uns zum Beispiel an, dass wir es als Symbol erstellen wollen. Also gehen wir zu diesem Abschnitt, wir klicken einfach darauf, wir erstellen diesen Abschnitt. Dies ist unser Informationsbereich. Perfekt. Jetzt haben wir hier also ein neues Symbol. Nehmen wir zum Beispiel an, wir möchten eines davon weiter unten auf der Seite hinzufügen , okay? Also nehmen wir es, wir kopieren es, wir fügen es ein. Da haben wir's. Jetzt haben wir also zwei von vier Abschnitten am Ende der Seite. Nun, wenn ich das hier unten ändere und Sie zwei Symbole anklicken müssen um sie auch tatsächlich zu ändern, also klicken Sie darauf, und dann können Sie es tatsächlich ändern. Du wirst dasselbe sagen, Scott ist hässlich, nur ein Scherz, dann rate mal was? Wenn du nach unten gehst, ändert es sich automatisch Nun, das kann für Dinge wie Formulare sehr nützlich sein , wenn Sie dasselbe Formular am Ende jeder Seite haben möchten , oder vielleicht möchten Sie Bewertungen hinzufügen und Sie möchten nur ein einzelnes Feld aktualisieren, ohne jede einzelne Bewertung auf der gesamten Website zu aktualisieren , und Sie möchten Bewertungen auf jeder einzelnen Seite haben. Es kann sehr nützlich sein. Verwenden Sie also Symbole, wann immer Sie Zeit sparen möchten, verwenden Sie sie für Ihre NaF-Leiste, verwenden Sie sie für Fußzeilen, und Sie können mehrere Symbole verwenden, so viele, wie Sie möchten, um so viel Zeit zu sparen, wie Sie benötigen Wie dem auch sei, ich hoffe wirklich, dass Sie diesen kleinen Tipp hilfreich finden. Und ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 48. Webflow 101: Lightboxes: Okay, was ist eine Lightbox und wie kann man sie verwenden? Nun ja, ich verwende Leuchtkästen auf meiner Website ziemlich oft, wo ich im Grunde genommen eine kleine Schaltfläche habe , die durch einen Lightbox-Link erstellt wurde und der dann letztendlich geöffnet wird, dann letztendlich um irgendeine Art von Video oder Bild zu präsentieren Also ich benutze es hier, aber ich verwende es auch etwas weiter unten sodass, wenn jemand Video-Testimonials von Kunden ansehen möchte , er einfach auf diesen Link klickt und das Video wird automatisch angezeigt Das ist eine wirklich einfache Möglichkeit , Videos und Bilder, unabhängig davon, was für Ihre Marke relevant ist, auftauchen zu lassen, wenn jemand auf einen Link klickt, und das ist eine wirklich einfache Möglichkeit, dies zu tun Und ich werde Ihnen in diesem Video zeigen, wie Sie einen Lightbox-Link verwenden Okay, wir sind wieder auf unserer kleinen experimentellen Website, wir uns nicht wirklich was passiert, wenn etwas kaputt geht, und ich möchte nicht wirklich zu viel mit der Website meiner Brandon-Agentur herumspielen , weil ich diese Website in den letzten zehn Jahren verfeinert habe, und ich möchte nichts Lassen Sie uns also eintauchen und sehen, wie wir diese Lightbox-Link-Funktion letztendlich nutzen können , um unseren Benutzern beim Besuch unserer Website letztendlich eine wirklich nette Erfahrung zu bieten. Also, die Lightbox-Funktion ist einfach da. Also werden wir das dem Container hinzufügen . Und aus irgendeinem Grund will es da nicht rein. Also was ich tun werde, ist, ich werde es einfach hier fallen lassen. Und dann kann ich einfach kopieren. Wenn Sie das tun, wird automatisch ein Bild in den Lightbox-Link eingefügt Ich will also nicht das eigentliche Bild haben, ich lösche einfach das Bild und nehme den Leuchtkasten Ling, also kopiere ich es und durchbohre Dann werde ich hier reinspringen. Denken Sie auch hier daran, dass Sie doppelt klicken müssen , um zu den Symbolen zu gelangen, die wir in der vorherigen Lektion erwähnt haben. Doppelklicken Sie. Jetzt sind wir drin. Sie können sehen, dass dieser Abschnitt hervorgehoben ist. Dann möchte ich diese Schaltfläche entfernen und einen Lightbox-Link hinzufügen Perfekt. Da hast du's. Jetzt haben wir den Lightbox-Link zu diesem speziellen Abschnitt hinzugefügt den Lightbox-Link zu diesem speziellen Abschnitt Jetzt möchte ich nicht, dass sich der Lightbox-Link darunter befindet. Ich will, dass es an der Seite ist, okay? Also lass uns sehen, wie wir das machen können. Also würde ich es einfach kopieren und wieder einfügen. Die Schaltfläche befindet sich im D-Block. Also wenn ich hier Einfügen drücke, hier Do drücke, geht es zur Seite. Jetzt möchte ich, dass dieser Lightbox-Link wie eine Schaltfläche aussieht Also, wie machen wir das? Nun, denken vielleicht, Sie könnten es tun, indem Sie einfach eine Schaltfläche hinzufügen. Sie können jedoch kein Element verwenden, das auf den Lightbox-Link verweist oder dem ein Link zugeordnet ist, da dies für den Computer und für den Webflow als Plattform verwirrend wäre für den Computer und für den Webflow als Plattform verwirrend wäre und für den Webflow als Plattform Sie sagen ihnen im Grunde, sie sollen zwei sehr unterschiedliche Dinge mit demselben Element tun , was einfach nicht funktionieren wird Wir können also keine Schaltfläche hinzufügen. Also, wie können wir das machen? Nun ja, wenn wir über den Lightbox-Link ein bisschen wie über den Link-Block denken den Lightbox-Link ein bisschen wie über den Link-Block und wenn Sie die Linkblock-Lektion etwas früher in diesem Kurs tatsächlich befolgt haben die Linkblock-Lektion , dann wissen Sie genau, was wir tun Was wir also tun können, ist, dass wir zwar keine Schaltfläche einfügen können, wir können Text hineinlegen, also werden wir etwas Text hinzufügen, was großartig ist Sie sich jetzt keine Sorgen, dass das im Moment unterstrichen wird Das wird sich in einer Weile alles ändern. Bewertungen ansehen. Okay, so perfekt. Also haben wir den Text. Wir gehen hier runter, was derzeit unterstrichen ist Denken Sie an die Typografie-Lektion. Wenn Sie das noch nicht ausgecheckt haben, schauen Sie sich das jetzt an. Wir werden das entfernen und dann den Link entfernen, der damit verknüpft ist. Um diese Zeile wegzunehmen, wegzunehmen werden wir in erster Linie die Farbe des Textes ändern. Und dann werden wir tatsächlich zum Lightbox-Link gehen und die Linie darunter entfernen, so wie Jetzt haben wir also den Text innerhalb des Lightbox-Links , sodass jedes Mal, wenn dieser gedrückt wird, ein Video angezeigt wird Nun, wie fügen wir das Video hinzu? Also wählen wir einfach den Lightbox-Link und gehen zu den Einstellungen Und was Sie im Grunde sehen werden, ist etwas, das als Medien in den Lightbox-Link-Einstellungen bezeichnet Jetzt müssen Sie hier nur noch ein Bild oder ein Video hinzufügen nun das Video hinzufügen, laden Sie Ihr Video einfach auf Vimeo und fügen dann im Grunde den Link in diesem speziellen Abschnitt hinzu, der das Video zeigt, wenn alles angezeigt wird. Oder du kannst einfach Bilder hinzufügen. Nun, das Bild, das gerade vorhanden ist , ist dieser kleine Platzhalter, aber wir wollen nicht, dass das passiert Also werden wir das im Grunde durch dieses Bild von diesem schönen Herrn hier ersetzen durch dieses Bild von diesem schönen Herrn Also jetzt, wenn wir zurückgehen. Und zum Beispiel können Sie auch weitere Medien hinzufügen. So können wir dieses Bild hinzufügen. Und dann könnten wir ein weiteres Bild hinzufügen. Sie können also so viele Bilder hinzufügen, wie Sie möchten. Denken Sie jetzt daran, dass Sie keine Bilder und Videos hinzufügen können, und Sie können auch nicht zwei Videos hinzufügen. Okay, du müsstest diese beiden Videos im Grunde zusammen bearbeiten , sodass es ein einziges Video ist. Okay, wir haben jetzt drei Bilder im Spiel. Also, wenn wir das abklicken, dann sollte das alles eingerichtet sein. Gehen wir also zu diesem Abschnitt, klicken Sie darauf. Und tatsächlich sind drei Bilder aufgetaucht. Nun, Sie können diese spezielle Funktion für viele verschiedene Dinge verwenden , und es ist nur eine wirklich einfache, saubere Art, alles zu verstecken Eine Sache, die Sie zum Beispiel tun könnten, ist, wenn Sie möchten, dass zum Beispiel tun könnten, ist, wenn Ihr Portfolio , Sie wissen schon, ein bisschen sauberer und nicht so chaotisch ist, dann könnten Sie letztendlich einen Lightbox-Link zu diesem Abschnitt im Raster hinzufügen einen Lightbox-Link zu diesem Abschnitt im Und dann könntest du in diesem speziellen Bild dieses Bild letztendlich wieder zu diesem Typen ändern dieses Bild letztendlich wieder zu diesem Typen Und wenn dann tatsächlich darauf geklickt wird, könntest du zu den Einstellungen gehen und diesen Typen hinzufügen Und Sie können den Medien tatsächlich sowohl Videos als auch Bilder gleichzeitig hinzufügen den Medien tatsächlich sowohl Videos als auch Bilder gleichzeitig Ich würde es jedoch nicht einfach vorschlagen , weil es für den Benutzer etwas verwirrend sein kann. Aber wir können viele verschiedene Bilder hinzufügen und im Grunde genommen ein viel saubereres Erlebnis für den Benutzer schaffen. Lassen Sie uns hier zum Beispiel einfach ein weiteres Bild hinzufügen . Da haben wir's. Anstatt zum Beispiel, dass unser Portfolio an die Reihe kommt, können wir natürlich, wissen Sie, ein bisschen Marge drunter hinzufügen . Da haben wir's. Wenn wir zum Beispiel zu unserem Portfolio gehen, anstatt jedes einzelne Bild zu haben, das wir haben, könnten wir möglicherweise , wissen Sie, wenn wir mehr Bilder von diesem bestimmten Herrn hätten, es so haben, dass, wenn jemand darauf klickt, tatsächlich die anderen Bilder angezeigt werden, die bestimmte Bild relevant sind All das könnten verschiedene Projekte sein, und wenn du dann darauf klickst, mehr Bilder angezeigt, mehr Fotos, du weißt schon, mehr Medien, mehr Beispiele, die sich mehr Fotos, du weißt schon, mehr Medien, mehr Beispiele, auf dieses spezielle Projekt beziehen. Okay, ich hoffe wirklich, dass Ihnen diese kurze Lektion zur Verwendung der Lightbox-Funktion gefallen hat , und ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald 49. Webflow 101: Schieberegler: Okay, also wie können Sie Slider im Webflow verwenden , um letztendlich eine großartige Benutzererfahrung zu schaffen Nun, vor Kurzem haben wir für die Marke Ear, mit der wir gearbeitet haben, eine Slider-Funktion eingerichtet für die Marke Ear, mit der wir gearbeitet haben, eine Slider-Funktion , die letztendlich all die verschiedenen Kundenreferenzen für dieses spezielle Unternehmen zeigt für Wie erstellen Sie also tatsächlich eine großartige Slider-Funktion auf Nun, es ist eigentlich ganz einfach. Wenn Sie also nach unten gehen, fügen wir hier einen weiteren kleinen Abschnitt hinzu , den wir den Slider-Bereich nennen. Obwohl es aus irgendeinem Grund eigentlich nicht hierher will . Da hast du's. Endlich sind wir da. Jetzt haben wir den Abschnitt. Lassen Sie uns einen Container hinzufügen. Lass uns ein bisschen Polsterung hinzufügen. Sagen wir 100, 100 hier, 30 so oder so auch auf dieser Seite . Da haben wir's. Also, was das Hinzufügen eines Sliders angeht, gehen wir einfach hier hin. Wir gehen runter zur Slide-Funktion, die hier ist. Wir legen das in den Container und wir haben den Slider eigentlich schon so gut wie fertig Wie können wir anfangen, ihn zu bearbeiten? Nun, das erste , was Sie tun müssen, ist jetzt Ihren Slider zu bearbeiten. Also geh hier runter. Also, hier gibt es tonnenweise verschiedene Optionen. Nun, was mir gefällt, ist, dass ich die Folien letztendlich so minimalistisch wie möglich anordnen möchte. Damit meine ich, dass ich es nicht wirklich mag, wenn sie nummeriert sind. Niemand verwendet mehr wirklich Zahlen in Folien. Es ist sehr altmodisch. Das sieht viel sauberer aus und sieht viel besser aus. Du kannst auch wählen, ob es abgerundet oder eckig ist, sodass du hier sehen kannst, wie es sich verändert Ich werde sie rund lassen. Jetzt kannst du auch einen Schatten hinzufügen, wenn du wirklich willst, was manchmal ziemlich cool aussehen kann, aber ich mag es, es schön scharf und nett und minimal zu halten . Du kannst Farben auch invertieren, sodass du sie im Grunde dunkler machen kannst Es hängt natürlich alles von der Art der Website ab , die Sie haben Aber was diesen speziellen Fall angeht, werde ich sie einfach weiß und grau lassen , nur weil ich den Minimalismus mag Jetzt können Sie auch den Abstand zwischen den Folien vergrößern, wenn Sie etwas Moderneres und Futuristischeres wollen , dann können Sie es auf vielleicht zehn hinzufügen Aber zu diesem Zweck werde ich es einfach bei fünf belassen In Bezug auf das Hinzufügen von Folien können Sie ganz einfach Folien hinzufügen. Was ich tun werde, weil es ziemlich schwierig diese speziellen Schaltflächen auf einer Folie zu sehen, wenn beispielsweise die Folie weiß ist. Normalerweise verwende ich am liebsten die Foliennavigation und platziere sie außerhalb des eigentlichen Sliders. Aber in diesem Fall ist der Hintergrund weiß, ich werde ihn einfach so lassen, wie er ist. Andernfalls müsste ich das im Grunde ändern um zum Beispiel entweder einen Schatten zu haben oder Farben umzukehren, und das würde es mir ermöglichen, es dann über den Tellerrand zu bringen Aber in diesem Fall werde ich die Dinge einfach so lassen, wie sie sind Also, jetzt haben wir tatsächlich den Slider. Wie können wir anfangen, ihn zu benutzen? Um also eine Folie hinzuzufügen, müssen Sie nur die Folie hier hinzufügen. Wir haben jetzt also drei Folien zusammen. Und um zu diesen Folien zu gelangen drücken Sie einfach diese Taste in den Einstellungen. Jetzt sind wir also Folie zwei, jetzt sind es Folien 3, jetzt ist es Folie eins, also ist es so einfach. Wie können wir also anfangen, diese Folien tatsächlich zu bearbeiten? Nun, diese Folie ist im Wesentlichen wie ein iD-Block. Und was ich mit einem Di-Block meine, ist, dass Sie so ziemlich alles machen können, was Sie wollen. Sie könnten also, wissen Sie, zum Beispiel ein Grid hinzufügen . Oder Sie könnten tatsächlich etwas Einfacheres tun. Sie könnten zum Beispiel einfach ein Bild hinzufügen , das hineinpasst. Wähle ein Bild. Wählen wir den Schwan Okay. könntest du darin im Grunde eine Art Bild hinzufügen. Wählen Sie hier das Bild aus und wir zentrieren es, wenn Sie das Bild sind. Außerdem haben wir den Schwan da. Also kannst du einfach so ein Bild hinzufügen , wenn du wirklich willst, aber dann müsstest du im Grunde zu Folie zwei gehen Und innerhalb von Folie zwei würden Sie ein weiteres Bild hinzufügen. Wählen Sie auch hier einfach das Bild , das Ihrer Meinung nach am besten zu Ihnen passt. Und dann können Sie es einfach platzieren , wie Sie möchten. Da hast du's. Also, wenn wir das jetzt tatsächlich gespielt haben, kannst du sehen, dass es durch verschiedene Bilder scrollt Jetzt können Sie es vielleicht für ein Portfolio, vielleicht für Produkte oder was auch immer Sie für Ihre spezifische Website benötigen, für Produkte oder was auch immer Sie für Ihre spezifische Website Aber eine Folie hinzuzufügen, ist wirklich, wirklich einfach. Und ob du letztendlich etwas mehr machen willst , ich weiß es nicht. Komplex. Dann könntest du. Lass mich einfach diese Bildbox von hier wegnehmen . Perfekt. Jetzt sind wir also wieder am Anfang. Nun, wenn Sie etwas Ähnliches wie den Abschnitt mit den Testimonials erstellen möchten , den ich Ihnen zu Beginn dieser Lektion gezeigt habe, dann könnten wir es ein bisschen so machen Also werde ich einfach einen wirklich einfachen erstellen. Also das ist ein Diblock, aber wir können einen Diblock stecken Also, wie bringen wir den Slider dazu , von selbst automatisch abzuspielen Wir müssen diese Pfeile also nicht wirklich verwenden, und das passiert einfach automatisch für den Benutzer Nun, wir können hier die Dauer festlegen, die im Wesentlichen 5 Sekunden beträgt. Dann können wir Folien automatisch abspielen. Zeit und Verzögerung. Sofern Sie keine Zeit und Verzögerung wünschen, würde ich vorschlagen, Null zu setzen. Wir können diese Symbole also löschen, aber es hängt natürlich ganz von Ihnen ab, was Sie wollen. Sie können diesen bestimmten Abschnitt entweder hier löschen , indem Sie einfach darauf klicken. Sie können auch auf den Linkspfeil klicken und ihn so ausblenden, sodass er viel übersichtlicher ist. Und wenn wir es dann tatsächlich spielen, können Sie hier unten sehen , dass sich die Elemente nach etwa 5 Sekunden von selbst ändern. Da hast du's. Nach 5 Sekunden geht es automatisch zur nächsten Folie. Jetzt, wo das erledigt ist, können wir anfangen, Bewertungen hinzuzufügen. Also, wie machen wir das? Nun, im Moment ist das eigentliche Element selbst grau. Es hat also einen grauen Hintergrund. Also, das wollen wir nicht. Wir wollen, dass es völlig transparent ist. Was wir danach tun werden, ist, dass wir diese Elemente unten jetzt nicht wirklich sehen können, wir werden Einstellungen vornehmen, einen Schatten hinzufügen und vielleicht sogar Farben invertieren Da haben wir's. Das sieht tatsächlich viel besser aus. Was wir jetzt tun werden, ist, tatsächlich mit dem Hinzufügen der Bewertungen zu beginnen, sodass wir die Bewertungen hinzufügen können, indem wir einfach ein Raster hinzufügen, das sich hier befindet. Dann werden wir diesen unteren Abschnitt löschen , weil wir nicht zu viele Abschnitte am unteren Rand benötigen. Wir wollen nur zwei. Und dann werden wir in jedem von ihnen einen Div-Block hinzufügen. Also werden wir hier einen dI-Block hinzufügen. Wir werden hier einen weiteren Diblock hinzufügen. Nun, ein kleiner Trick , den ich Ihnen zeigen werde, ähnelt den Tricks, die ich Ihnen in früheren Lektionen zum Ihnen zeigen werde, ähnelt den Tricks, die Kopieren und Durchbohren von DI-Blöcken gezeigt habe Kopieren und Durchbohren von DI-Blöcken Sie müssen in diesen beiden Abschnitten keine Di-Blöcke Sie müssen einen Diblock entwerfen, und wenn Sie das tun, können Sie ihn über den gesamten Slider multiplizieren über den gesamten Slider Also werden wir hier zum Beispiel einfach einen wirklich einfachen Header hinzufügen Für den Namen der Person, Absatz darunter. Wir werden eine Art Bild hinzufügen, das in einen anderen dI-Block aufgenommen werden muss. Also fügen wir ein weiteres Bild hinzu, das hier sein sollte. Da haben wir's. Perfekt. Jetzt haben wir also unseren Header , der der Name der Person ist. Wir haben ihre Bewertung. Röcke. Der Webflow-Kurs ist es nicht. Überhaupt schlecht. Ich habe es diese Woche geschafft, meinen Milchmann zu bezahlen. Gute Neuigkeiten. Da haben wir's, und dann müssen wir nur noch die Schreibweise überprüfen. Dafür können wir zum Beispiel tatsächlich eine Fünf-Sterne-Bewertung hinzufügen. Gehen wir also zu Google, Five Star-Bewertungen, gehen wir zu Bildern. Und hier können wir im Grunde fünf Sterne sehen. Also, das sieht nicht sehr gut aus. Mir gefällt dieser sogar ein bisschen besser. Das ist ein PNG, also werden wir dieses verwenden. Also speichere dieses Bild. Dann werden wir das auf dem Desktop speichern. Natürlich können Sie Ihr eigenes erstellen, wenn Sie wirklich möchten , ein Bild auswählen und es hervorheben. Und dann sollten die fünf Sterne im Sucher gut zur Geltung kommen . Jetzt können Sie hier sehen, dass Sie sie nicht wirklich sehen können. Der Grund dafür ist , dass das Bild zu groß ist. Was wir also tun können, ist, es kleiner zu machen , großartig. Das ist gut. Und was wir dann tun können, ist dieses Bild im Grunde ein Quadrat ist, was ich nicht wirklich mag. Ich denke, wir sollten es stattdessen tun, und du kannst es ein bisschen professioneller machen, aber ich zeige es dir nur der Schnelligkeit halber lass uns mir einfach vier Sterne geben Da haben wir's. Anstatt diese große quadratische Version zu verwenden, werde ich sie im Grunde mit dem Screenshot ändern, der im Grunde nur das Hinzufügen von Formularen ein bisschen besser ist. Und als ob du es nicht wüsstest, das ist jetzt. Es ist vielleicht ein bisschen klein, nur ein bisschen größer gemacht. Da hast du's. Jetzt haben wir also die Bewertung. Nun, wie lassen wir es ein bisschen besser aussehen ? Nun, wir haben den Diblock? Wir können es ein bisschen aufpolstern, glaube ich, nur damit es ein bisschen besser aussieht, wenn wir gehen Und was wir dann tun können, ist, dass wir vielleicht die Ecken ein bisschen krümmen können Wir können ein bisschen Schatten hinzufügen , meinen Kopf wegbewegen. Draußen. Jetzt habe ich da aus irgendeinem Grund einen kleinen Schatten, der oben und unten auf dem Slider abgeschnitten ist. Und der Grund dafür ist, dass es sich im Grunde mit der eigentlichen Slide-Funktion überschneidet Was wir also tun müssen, ist, dass wir oben und an den Seiten etwas Polsterung hinzufügen müssen etwas Polsterung hinzufügen oben und an den Seiten Ich möchte einfach 15 machen nur um nett zu sein und dem Ganzen eine nette Zahl zu geben 15, 15. Und alles, was das tut, ist, dem eigentlichen Schatten Raum zum Atmen zu geben , richtig? Ich weiß, dass das ein wirklich einfacher Schatten ist. Lass es uns von David sehen. Da haben wir's. Also David Copperfield. Da haben wir's David C. Nochmals, was ich bereits erwähnt habe , ist, dass wir diese einfach duplizieren und einfach so viele erstellen können diese einfach duplizieren und einfach so viele erstellen , wie wir möchten, um ganz ehrlich zu sein So können wir dann sogar die eigentliche Folie selbst duplizieren , wenn wir die Dinge nicht immer wieder wiederholen wollen die Dinge nicht immer wieder Das ist also von Parla H. Sag buchstäblich genau dasselbe , weil der Webflow-Kurs offensichtlich fantastisch ist, obwohl sie nicht hier wäre Lass uns hierher gehen. Wir gehen zur nächsten Folie, und diese Folie ist leer. Also müssen wir im Grunde alles von Grund auf neu aufbauen. Also, ich will das wirklich nicht tun, oder? Also lass uns das einfach löschen. Gehen wir zu dieser Folie, drücken Sie einfach auf Kopieren und dann auf Maskieren und Einfügen. Jetzt haben wir also mehrere Rezensionen, die wir bearbeiten und ändern können , nachdem wir die erste Box entworfen haben. Nachdem wir diese erste Box entworfen haben, müssen wir buchstäblich nicht mehr arbeiten. Alles, was wir tun müssen, ist die anderen Bewertungen zu kopieren und dort einzufügen, die entsprechende Sternebewertung hinzuzufügen, die wir zum Beispiel für unser Produkt oder unsere Dienstleistungen erhalten haben , die wir zum Beispiel für unser Produkt oder unsere Dienstleistungen , und dann können Sie sie ganz einfach verwalten. Wenn Sie Fragen zu diesen speziellen Elementen haben , weiß ich, dass es eines der komplizierteren Elemente in Webflow ist, aber um ehrlich zu sein, ist es ziemlich einfach und ziemlich unkompliziert Wenn Sie also zusätzliche Unterstützung benötigen, wenden Sie sich bitte an mich und lassen Sie es mich wissen, aber das sollte so ziemlich alles sein Also werde ich dich in der nächsten Lektion sehen. Seht euch das an. 50. Webflow 101: Tabs: Okay, was ist ein Tab und wie können Sie ihn verwenden, um wunderschöne Funktionen auf Ihrer Website zu erstellen Funktionen auf Ihrer Website Nun, wir verwenden die Tabs-Funktion tatsächlich für viele Dinge auf der Website meiner Brand Agency. So werden wir zum Beispiel Blogbeiträge auf wirklich einfache und leicht verständliche Weise organisieren . Und ich denke, das Wichtigste ist , wenn wir es in unserem Portfolio verwenden. Wenn also zum Beispiel jemand zu uns und zum Beispiel zur Fitnessmarke R A kommt , dann kann letztendlich kommen und sich ansehen, welche Art von Arbeit wir machen. Wenn sie nach einem Markennamen suchen, können sie sich all die verschiedenen Projekte zur Markenbenennung ansehen , an denen wir gearbeitet haben. Auf der anderen Seite, wenn sie ein E-Commerce-Unternehmen sind, zum Beispiel ein Fitnessunternehmen, und sie wollen sehen, okay, welcher Art von Dienstleistungen oder mit welcher Art von Dienstleistungen oder Unternehmen Sie im E-Commerce-Bereich zusammengearbeitet haben, dann könnten sie hierher kommen, sich E-Commerce ansehen und sich all die E-Commerce-Marken ansehen, mit denen wir im Laufe der Jahre zusammengearbeitet haben. Und das macht es dem Benutzer einfach und einfach, die Informationen zu finden, die er benötigt, denn wenn ein Kunde beispielsweise eine Branding-Agentur beauftragen möchte, sucht er nach Arbeitsbeispielen, die für das relevant sind , was für seine Marke erreichen möchte. Es ist also einfach richtig toll. Tabs sind also einfach eine großartige Möglichkeit , die Informationen auf Ihrer Website zu organisieren , sodass Sie dem Benutzer letztendlich immer einfacher das geben können, was er benötigt. Okay. Also, jetzt sind wir wieder auf unserer kleinen Test-Website, die wir nicht wirklich kaputt wollen, weil wir nur herumspielen. Wie benutzt man eigentlich Tabs? Okay, lassen Sie uns hier einen Abschnitt zwischen diesen beiden Elementen hinzufügen . Wenn es mich lässt. Ja, wenn Sie damit nicht wirklich Abschnitte oder Elemente an bestimmten Stellen hinzufügen können, kopieren Sie es entweder und fügen Sie es ein oder verwenden diese Navigatorleiste hier, um letztendlich genau zu zeigen, wo Sie es haben möchten, und dann wird es ein bisschen weniger Aufwand sein Am Container. Dann werden wir, wie üblich, ein bisschen Polsterung hinzufügen Also das ist vielleicht einfach nur ja, 65 scheint gut zu sein. Und wir legen 40 auf jede Seite. Das sieht auch gut aus. Perfekt. Okay, jetzt haben wir das an Ort und Stelle. Wir gehen hier runter zur Tabs-Funktion und legen sie direkt hinein. Was Sie hier sehen können, ist dass wir drei verschiedene Tabs haben. Und wenn wir uns die Website tatsächlich ansehen, können Sie sehen, dass jeder dieser Tabs derzeit aktiv ist, okay? Wie fangen wir also an, diese Tabs zu verwenden , um etwas Nützliches mit ihnen zu machen? Nun, lassen Sie uns in erster Linie etwas wirklich Einfaches machen. Ich möchte also die verschiedenen Arten von Bildern präsentieren verschiedenen Arten von Bildern , die ich als Fotograf aufgenommen habe. Ich bin kein echter Fotograf, aber ich verwende das nur als Beispiel, bei dem Sie den Bildtyp anhand der ausgewählten Registerkarte auswählen können den Bildtyp anhand der ausgewählten Registerkarte auswählen . Also werde ich zum Beispiel Tiere, Menschen und Gebäude platzieren. Okay? Also, ich bin Fotograf und erstelle diese Tab-Funktion, um sie potenziellen Kunden zu präsentieren? Wenn sie jemanden wollen, der ein Foto von einer Person machen kann, dann wen sie wollen. Und wenn Sie jemanden suchen , der Gebäude fotografieren kann, finden Sie hier einige Beispiele von Gebäuden , von denen ich Fotos gemacht habe. Und natürlich sind Tiere, das ist eine Selbstverständlichkeit. B-Tiere sind fantastisch. Wie fangen wir also an, das gut aussehen zu lassen? Und wie fangen wir an, Inhalte zu den Registerkarten hinzuzufügen ? Lassen Sie uns also in erster Linie eintauchen. Wie können wir also tatsächlich damit beginnen, dieses Tab-Menü zu gestalten? Wir können das also tun, indem wir einfach zum Tab-Link gehen. Farbe. Und wir können das grün färben. Lassen Sie uns diesen Text zum Beispiel auch weiß machen. Schwarz und Grün tun es mir also nicht wirklich. Oh, das ist extrem kontrastarm. Lass uns das ein bisschen besser machen. Etwas besser. Okay. Perfekt. Was die Leute angeht, lasst uns noch einmal wählen. Entscheiden Sie sich für Weiß. Aber dieses Mal entscheiden wir uns für ein schönes Rot. Das passt zu diesen Tieren. Okay. Perfekt. Nun, das ist bei weitem nicht die ästhetischste Farbpalette, aber ich möchte es Ihnen im Grunde zeigen und die Dinge während der Entwicklung wirklich einfach und klar halten während der Entwicklung wirklich einfach und klar Okay. Da hast du's. Perfekt. Fügen wir das einfach hinzu. Du. Perfekt. Okay, jetzt müssen wir anfangen, diese Bilder hier hinzuzufügen, also können wir einfach einen Diff-Block hinzufügen In den Tab-Pin. Nun, ein Tab-Pan ist im Grunde nur ein dI-Block innerhalb der Tabs-Funktion. Denken Sie also daran, weil es die Dinge für Sie einfach macht. Wenn wir nun tatsächlich einen Diblock auswählen, können wir damit beginnen, das Bild oder die Bilder der tatsächlichen Ente oder des Schwans hinzuzufügen der tatsächlichen Ente oder des Schwans Da haben wir's. Perfekt. Und wenn wir dann zu den Leuten gehen, warum ändert sich das nicht? Hm. Interessant. Nun, was wir tun müssen ist einfach zum Tabs-Menü zu gehen und auf Einstellungen zu klicken. Und wenn wir zu den Einstellungen gehen, können Sie diese kleine Funktion hier sehen. Und wenn wir auf Tab zwei klicken, bedeutet dies, dass Tab zwei ausgewählt ist, sodass wir erneut damit beginnen können, unseren Diblock hinzuzufügen Fügen Sie unser Bild hinzu, und dann können wir ein Bild von einer Person hinzufügen. Ist das eine Person? Perfekt. Und dann machen wir einfach genau dasselbe für den Gebäudeteil, fügen Dave Block hinzu. Und sobald Sie anfangen, diese Elemente zu verwenden, wird es für Sie viel einfacher , Websites zu erstellen. Alles ist mit Übung verbunden. erinnere mich an das erste Mal, als ich mit dem Erstellen von Websites anfing und im Grunde genommen innerhalb einer Woche Webflow lernen musste , was, wissen Sie, definitiv, wissen Sie, ein hoher Druck für das Projekt war, an dem ich arbeitete, weil der Kunde Webflow wirklich nutzen wollte Aber nach einer Woche, in der man sich wirklich darauf konzentriert hat , die Grundlagen zu lernen, gewöhnt man sich wirklich sehr schnell daran Nun, ich bin sicher, dass Sie eine Sache verstanden haben, ist, dass sich, je nachdem, welche davon ausgewählt ist, im Grunde je nachdem, welche davon ausgewählt ist, die eigentlichen Schaltflächen auf der Oberseite ändern Nun wollen wir natürlich nicht, dass das passiert. Also, was ich machen werde, ist Tab One Style. Wenn es also tatsächlich ausgewählt ist, ist es mit Strom verbunden. Also, was wir tun werden, ist, wir werden zu diesem Tab zwei übergehen . Wir werden das damit machen. Da haben wir es. Sie können sehr kreativ werden, wissen Sie, wie diese angeordnet sind, und, Sie wissen schon, Sie können sie zum Beispiel in verschiedenen Farben auftauchen lassen. Aber was versuchen Sie letztendlich zu tun, wenn Sie nur sicherstellen möchten, dass es in der gesamten Tab-Funktion konsistent ist in der gesamten Tab-Funktion Das nächste , was wir tun werden, ist p, geh hier runter und wir können zu diesem Abschnitt gehen Da haben wir's. Das muss also aktualisiert werden. Da haben wir's. Und dann müssen wir nur noch das letzte tun , das ist Tab drei. Aus irgendeinem Grund ist dieser ausgewählt, also wird er uns ein wenig Vorsprung verschaffen, aber lassen Sie uns zu diesem Abschnitt hier übergehen Da haben wir's. Jetzt, wenn wir es tatsächlich abspielen, wenn wir die verschiedenen Optionen auswählen, können Sie bestimmte Bilder präsentieren, die für unseren speziellen Tab relevant sind , den wir eingerichtet haben. Und du kannst das für so ziemlich alles verwenden. Sie können dies verwenden, um Projekte zu präsentieren. Sie können dies für Showcase - und verschiedene Produkte wählen. Sie können dies sogar verwenden, um verschiedene Pakete zu präsentieren , oder? Sie hätten ein Core-Paket, ein Pro-Paket und ein Plus-Paket verdienen können. All dies beinhaltet unterschiedliche Dinge, und wenn Sie dieses Paket auswählen, kann es letztendlich darum gehen, die verschiedenen Arten von Paketen und die in diesem Paket enthaltenen Inhalte zu präsentieren die verschiedenen Arten von Paketen und die in diesem Paket enthaltenen Inhalte Und wenn Sie ein bisschen weiter fortgeschritten sind, können Sie sogar anfangen, Dinge wie das zu tun , was wir hier für diesen Kunden getan haben, wo sie die verschiedenen Pakete im Grunde sowohl als einmalige Zahlungsoption als auch als Finanzierungsoption anbieten Das ist buchstäblich genau das Gleiche wie das was wir gerade auf der Test-Website gemacht haben. Der einzige Unterschied besteht innerhalb des DIV-Blocks, des Tabs. Wir haben das im Wesentlichen nur geändert , um weitere Informationen hinzuzufügen. Wir fügen also nicht nur ein Bild hinzu, sondern wir fügen all diese Informationen hier hinzu, was offensichtlich, weißt du, am oberen Ende dessen liegt , wie komplex der Tab sein sollte oder sein könnte. Aber ich zeige Ihnen nur das tatsächliche Potenzial der richtigen Verwendung von Tabs, weil es für die Person einfach und leicht ist , zwischen einmaligen Zahlungen und Finanzierungsoptionen zu wechseln. Es ist einfach ein wirklich großartiges Tool , das Sie in Ihrem Toolkit haben sollten. Wie dem auch sei, ich hoffe wirklich, dass Sie es weniger wertvoll gefunden haben. Ich hoffe, dass Sie Tabs auf Ihrer Website verwenden , weil sie sehr nützlich sind wenn Sie wissen, wie man sie richtig benutzt. Ich freue mich also darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 51. Webflow 101: Social-Media-Buttons hinzufügen: Okay, wie können Sie Ihrer Webflow-Website wirklich gut aussehende Social-Media-Symbole hinzufügen wirklich gut aussehende Social-Media-Symbole Ihrer Webflow-Website Nun, es ist eigentlich super einfach. Wenn wir also auf unsere Website gehen , an der wir gerade herumspielen während dieses Kurses herumspielen, können wir diese Schaltflächen jetzt wirklich sehr einfach hinzufügen Also werden wir wie immer einen Abschnitt hinzufügen . Wenn es mich erlaubt. Perfekt. Jetzt fügen wir sie einfach in der Mitte hinzu, nur um Ihnen zu zeigen, wie man sie hinzufügt und wie man es wirklich einfache Weise macht, also fügen wir einen Container hinzu. Wie üblich werden wir an dieser Stelle kein Muster hinzufügen , da es für uns nicht wirklich nützlich ist. Und dann werden wir in diesem Container einen Diff-Block hinzufügen Denken Sie daran, dass der Abschnitt das Land ist, auf dem das Haus steht, der Container ist das Haus und der Diblock ist der Raum Denken Sie also daran, dass Sie, wenn Sie Ihre Website erstellen , ein K sein werden. Also haben wir jetzt den DI-Block Jetzt müssen wir nur noch, ob wir zum Beispiel, ich weiß nicht, Facebook, Instagram und Twitter oder X hinzufügen wollen ich weiß nicht, Facebook, Instagram . Gehen wir an dieser Stelle zum Grid. Dann können wir auch ein zusätzliches kleines Rasterelement verwenden. Okay. Und was wir dann tun können, ist den dF-Block zu verwenden , um sie zentraler zu machen. Also werden wir sie zusammenbringen. Also ist das Netz zentraler. Und dann müssen wir nur noch dI-Blöcke in jedem dieser Rasterabschnitte hinzufügen . Okay, wir haben jetzt die Struktur eingerichtet, sodass wir einfach unsere Elemente hinzufügen können. Nun, wie fügen wir unsere Elemente hinzu? Nun, es gibt ein paar Möglichkeiten, wie Sie das tun können. Und um ehrlich zu sein, müssen Sie diese DI-Blöcke nicht einmal hinzufügen. Sie könnten einfach den eigentlichen Link-Block direkt verwenden, aber ich persönlich füge gerne einfach dI-Blöcke hinzu, nur weil dadurch beim Erstellen meiner Website ein bisschen mehr Struktur ich dadurch beim Erstellen meiner Website ein bisschen mehr Struktur habe. Dann kann ich einfach Linkblöcke hineinlegen. Jetzt müssen Sie diese iD-Blöcke nicht mehr hinzufügen. Das ist genau das, was ich gerne mache, weil es mir ein bisschen mehr Struktur auf der Website gibt. Aber sobald Sie die dI-Blöcke haben, müssen Sie nur noch die Linkblöcke darin ablegen. Wie Sie sehen können, werden sie tatsächlich herausgedrückt, also kopiere ich sie einfach und durchbohre sie dann in jeden einzelnen Jetzt befindet sich unser Link-Block also in jedem dI-Block innerhalb des dreiteiligen Rasters Nun, wie fangen wir bei unseren Icons an? Nun, wenn wir wollen, dass sie so aussehen, dann können wir letztendlich etwas auf dieser Website tun. Also wo können wir eigentlich die Icons für die Website bekommen? Nun, es gibt ein paar verschiedene Möglichkeiten , wie wir das machen können. Wenn wir zum Beispiel möchten, dass sie so aufleuchten, damit sie wirklich cool aussehen, können wir zu Google gehen kostenlose Symbole eingeben. Sie können ein Leerzeichen setzen, oder wenn Sie faul sind wie ich, müssen Sie kein Leerzeichen setzen. Gehen Sie auf diese Website, die flacon.com ist, und lassen Sie uns dann einfach Social-Media-Symbole einfügen Was dir übrig bleiben sollte, sind im Grunde all diese verschiedenen Optionen für Icons für soziale Medien, also wollen wir Facebook, Instagram und lass uns einfach TikTok machen, nur weil warum Also werden wir es herunterladen, PNG, kostenloser Download. Perfekt. Jetzt haben wir also alle Icons, die wir brauchen. Für mich persönlich muss ich diese besorgen und sie meinem Desktop hinzufügen , einfach weil mein schöner Computer so funktioniert. Aus irgendeinem Grund funktioniert dieser nicht. Nun, eine Sache, an die Sie denken sollten, wenn Sie die Symbole für Ihre Website tatsächlich auswählen die Symbole für Ihre Website ist sicherzustellen, dass sie alle konsistent sind, denn wenn sie nicht einheitlich sind, sagen wir, wenn Sie zum Beispiel zwei kreisförmige und ein quadratisches haben, wird das nicht besonders gut aussehen. Wenn Sie sich die Nike-Website ansehen, sind sie sich alle sehr ähnlich und sie befinden sich alle in exakt derselben Kreisgröße. Wenn wir sie also tatsächlich zur Website hinzufügen und wir werden sie jetzt zur Website hinzufügen, fügen Sie also das Bild hinzu und wählen Sie Upload. Wir werden uns für Instagram und TikTok entscheiden. Dann werden wir sie alle zu unserer Asset-Leiste hinzufügen . Da ist in erster Linie Facebook. Dann können wir das einfach kopieren und einfügen und dann die Bilder auf Instagram ändern und dieses Bild auf TikTok ändern. Wir laufen perfekt. Man kann sehen, dass sie alle gleich groß sind. Jetzt sind sie offensichtlich viel zu groß. Wie können wir sie also kleiner machen? Nun, wir fügen sie einfach hinzu. Und Sie können hier sehen, dass wir 75 75 haben, also können wir diese hier einfach hinzufügen, 75, sodass sie alle genau die gleiche Größe haben. Und dann gehst du, du hast deine Icons da. Wie können Sie also tatsächlich anfangen, diese mit Ihren Social-Media-Konten zu verknüpfen ? Nun, es ist wirklich einfach. Gehe einfach zu deinem Link-Block. Klicke auf das kleine Zahnrad Und dann geben Sie hier einfach die URL zu Ihrer Social-Media-Plattform Also gehe ich zum Beispiel zu Instagram, gehe zu meinem Profil, klicke auf den kleinen Link und füge das einfach hinzu , und wenn ich reingehe und auf diesen Link klicke, werde ich auf meine Instagram-Seite weitergeleitet. Nun, das sieht ziemlich gut aus, aber es sieht nicht so gut aus wie die Version von Nike. Jetzt kannst du es natürlich weiß oder grau machen oder wie auch immer du willst. Aber wie bekommt man diesen netten kleinen Schwebeeffekt , dass, wenn einer markiert ist, er einfach irgendwie herausspringt Nun, es ist eigentlich ganz einfach, und wir haben genau dieselbe Methode in früheren Lektionen behandelt , falls Sie sie noch nicht gelernt haben. Wie können wir das also machen? Nun, das Beste, was Sie tun können, ist, zum DIFF-Block zu gehen, einfach hier, zur Opazität zu gehen und etwas wie 50% einzugeben Das gibt uns also ein nettes, grüneres Aussehen und Gefühl. Also werden wir diesen auch machen. Diff-Block, 50% Und dann zu guter Letzt TikTok, 50%. Okay. Wenn wir es jetzt abspielen und Maus darüber fahren, leuchtet es immer noch nicht Also, wie bringen wir es zum Leuchten? Wirklich einfach? Gehe zum Div-Block, gehe zu Hover, geh runter, zu Pacity und dreh es auf. Vollgas Tun Sie hier dasselbe. Schweben Sie. Gehen Sie zur Kapazität, 100% Fantastisch. Wir machen so große Fortschritte. Schweben Sie, 50%, und dann gehen wir. Sie sind alle gut miteinander verknüpft. Nun, natürlich, wenn Sie eine der vorherigen Lektionen in diesem Kurs gesehen haben der vorherigen Lektionen in , was Sie haben sollten. Sie wissen, dass es eine Million Mal besser aussieht, wenn Sie einen kleinen Übergang hinzufügen . Nun, nur ein kleines Experiment Schauen wir uns die drei verschiedenen Übergangsebenen an, die Sie in Bezug auf Geschwindigkeit oder Sanftheit durchführen können Also, weißt du, 950 ist sehr, sehr, sehr hoch. Aber sieh dir die an. TikTok hat also buchstäblich keine Einstellung für die Übergangskapazität, also sollte es buchstäblich verschwinden. Schwarz, Grau. Schwarzgrau, wirklich, wirklich scharf. Schwarz, Grau. Schwarz, Grau, Schwarz, Grau. Facebook hat jedoch 500 als Kapazitätsglättung eingestellt , wenn Sie letztendlich versuchen, dies zu ändern Es sieht also ziemlich gut aus, oder? Glatt. Ich glaube, Instagram hat 950, das wird also extrem langsam sein, aber es sieht trotzdem sehr, sehr nett aus. Also, dieser ist ein bisschen schneller. Dieser ist ein bisschen langsamer. Jetzt können Sie wählen, was Ihnen persönlich am besten gefällt. Es ist wirklich egal. Es gibt keine richtige oder falsche Antwort. Es kommt nur auf persönliche Vorlieben an. Alles, was ich sehen kann, ist, ich weiß das nur, weil ich es mir ansehe. Könnte das Beispiel sein. Schau hier. Es ist auch extrem glatt. Also das sind ungefähr 500, glaube ich, oder vielleicht 400. Es ist also viel näher an den Facebook-Einstellungen , die wir gerade haben. Das Instagram ist ein bisschen langsamer. Es ist etwa doppelt so schnell oder geschmeidig. Es wird also ein bisschen langsam sein, aber es sieht viel flüssiger Es hängt also alles von den persönlichen Vorlieben ab. Wählen Sie die aus, die Ihrer Meinung nach am besten für Sie geeignet ist. Damit ist die Lektion zum Hinzufügen von Social-Media-Schaltflächen zu Ihrer Website quasi verknüpft Ich hoffe, es hat Ihnen gefallen und ich freue mich darauf, Sie in der nächsten Folge zu sehen. Wir sehen uns. 52. Webflow 101: Kurse: Okay, was sind Klassen? Nun, Klassen sind ein wirklich nützliches Tool innerhalb von Web Flow, das Ihnen das Leben erheblich erleichtert. Lassen Sie mich Ihnen zeigen, wie sie funktionieren. Nun, wenn wir hier einen Container hinzufügen und dann ein paar Schaltflächen hinzufügen, und was Sie sehen können, ist all diese Schaltflächen identisch sind. Und lassen Sie uns diese einfach ein wenig verteilen , nur um ihnen ein bisschen Platz zu geben, und los geht's. Moment sind also jeder dieser Schaltflächen keine Klassen zugewiesen. Wie können wir das ändern? Fangen wir diesen speziellen Button zu entwerfen. Geben wir also Gold Ticket ein. Geben wir in diesem Fall Golden Dog ein. Und in diesem Fall geben wir Golden Cat ein. Ich habe absolut keine Ahnung, warum ich diese Wörter verwende, aber haben Sie Geduld mit mir. Das ist nicht wichtig. Aber das Nächste , was ich mit Ihnen teilen werde, ist sehr wichtig. Wenn wir also diese spezielle Schaltfläche bearbeiten und sie zum Beispiel in Gold umwandeln, dann werden Sie im Grunde feststellen, dass sie Form oder Form der anderen Elemente in diesem Abschnitt in keiner Weise beeinflusst . Also, obwohl der goldene Ticket-Button goldfarben ist, sind es Goldener Hund und Goldene Katze nicht. Also, wie können wir das ändern? Was wir tun können, ist, die Schaltfläche zu nehmen und ihr eine Klasse hinzuzufügen. Im Moment wird diese Bearbeitung als Schaltfläche fünf eingestuft. Was wir tun werden, ist, diese Klasse umzubenennen Also setzen wir den goldenen Knopf. Im Moment wird dieser Knopf als Goldknopf bezeichnet, aber dieser ist nur ein kalter Knopf, an dem nichts befestigt ist. Also, wie können wir diesen Knopf so goldfarben machen wie diesen? Nun, es gibt zwei Möglichkeiten. Zum einen kopieren wir diesen Code, fügen ihn ein und fügen ihn hinzu. Das ist mir jedoch ein bisschen zu lang. Also lass es uns auf die intelligentere Art machen. Wir gehen in den Unterricht und nehmen die bestehende Klasse, die an diese Schaltfläche angehängt ist, und wenden sie auf diese Schaltfläche an, also so. Und das kannst du mit jedem beliebigen Element machen, auch mit einem Abschnitt. Für diesen speziellen Abschnitt ist es zum Beispiel derzeit mit der Polsterung verbunden , und dieser Klasse sind diese Eigenschaften zugewiesen Aber was ist, wenn wir Gold hinzufügen? Der Hintergrund wird golden? Was Sie also im Grunde tun können, ist, dass Sie Kurse nutzen können , um Ihr Leben viel einfacher zu machen. Wenn Sie möchten, dass alle Ihre Tasten genau gleich sind. Wenn wir zum Beispiel jetzt damit beginnen, das Padding auf dieser bestimmten Schaltfläche zu bearbeiten auf dieser bestimmten Schaltfläche Es wird sich auch auf alle anderen Schaltflächen dieser bestimmten Klasse auswirken auch auf alle anderen Schaltflächen dieser bestimmten Klasse Aber nehmen wir zum Beispiel an , wir möchten nicht, dass jede einzelne Schaltfläche exakt gleich ist. Nun, ich weiß nicht, warum Sie das nicht tun würden, aber nehmen wir zum Beispiel an, wir hätten einen weiteren Abschnitt weiter unten und die Schaltflächen hier wären ein bisschen anders. Fügen wir also eine Hintergrundfarbe wie diese hinzu und fügen wir Weiß hinzu. Jetzt sind diese Abschnitte immer noch durch die Klasse Abschnitt 5 miteinander verbunden . Aber dieser oben hat eine andere Klasse, nämlich weiß. Dieser hat diese zusätzliche Klasse nicht. Wenn wir also den Hintergrund für diese bestimmte Klasse auf Weiß ändern , wird er weiß und er bleibt dort, ohne dass sich dies auf diese bestimmte Klasse auswirkt. Wenn Sie also letztendlich eine zusätzliche Klasse hinzufügen, wird alles, was Sie hinzufügen und was auch immer Sie an dieser bestimmten Klasse ändern, das überschreiben was in der Standardklasse gemacht wurde Nehmen wir zum Beispiel an, wir ändern das in Gold Also, wenn das ein goldener Hintergrund ist und Sie die Knöpfe kaum sehen können. Wenn wir nun diese Schaltflächen ändern, zum Beispiel in Schwarz , werden alle Schaltflächen geändert , denen diese Klasse zugewiesen ist. Wie können wir das also ändern? Nun, wir könnten zum Beispiel einen komplett neuen Button machen. Ich mag diesen Button. Mir gefällt die Tatsache, dass es gut dimensioniert ist, die Polsterung ist nett, der Text ist nett Wie können wir also einfach die Hintergrundfarbe ändern, ohne restlichen Schaltflächen, die auf weißem Hintergrund großartig sind, komplett durcheinander zu bringen Nun, es ist eigentlich ganz einfach. Also würden wir einfach eine zusätzliche Klasse hinzufügen , um den goldenen Button zu überschreiben Im Grunde ist diese Klasse hier immer noch sehr aktiv, aber diese Klasse überschreibt diese Also würden wir hier einfach Schwarz hinzufügen und das auf Schwarz ändern Und wie Sie hier sehen können , überschreibt diese bestimmte Klasse jetzt die vorherige Klasse Und Sie können dies für jedes Element in Webflow verwenden. Sie können es für Symbole verwenden, sodass Sie jeder einzelnen Klasse den gleichen Feed erhalten Sie können es für Rezensionen verwenden. Sie können es für Text verwenden, sodass alle Ihre Überschriften genau die gleiche Größe haben. Sie können es überall verwenden. finden Sie diesen Stachel hilfreich, und ich freue mich darauf, Sie mit dem nächsten zu sehen. Wir sehen uns. 53. Webflow 101: Hintergründe: Also Hintergründe. Was sind sie und warum sind sie wichtig? Und wie kann man sie tatsächlich ändern? Es ist eigentlich ganz einfach. Jetzt gibt es zwei verschiedene Möglichkeiten, Hintergründe zu verwenden. Die erste Möglichkeit besteht nun darin, den Hintergrund eines bestimmten Abschnitts zu ändern . Natürlich können wir diesen Abschnitt auswählen, zu den Hintergründen gehen, dann können wir im Grunde die Farbe ändern oder wir können eine Reihe anderer Dinge tun, also könnten wir tatsächlich ein Bild als Hintergrund hinzufügen , oder wir könnten möglicherweise einen Farbverlauf hinzufügen, was so gemacht wird. Oder wir könnten einen kreisförmigen Farbverlauf hinzufügen , der im Grunde genau der Verlaufsoption entspricht, aber er gibt Ihnen offensichtlich die dunklere Farbe oder die alternative Farbe an der Außenseite. Oder zuletzt können Sie einfach eine normale Farbe hinzufügen. Der Grund, warum Sie diese verschiedenen Dinge hinzufügen können , ist, dass Sie sie tatsächlich übereinander hinzufügen können. Zum Beispiel haben wir das derzeit als Hintergrund, aber wir könnten auch Ear Grading als Hintergrund hinzufügen Grading als Hintergrund Also lass uns das einfach ein bisschen dunkler ändern. Und dann könnten wir letztendlich die Reihenfolge ändern. Im Grunde genommen wird das Element, das oben steht, dasjenige sein , das auf der Seite am auffälligsten ist. Und wir könnten das hinzufügen und es im Grunde auf 100% einstellen, und du würdest nichts sehen, oder je weniger Opazität es hat, desto leichter kannst du das Element dahinter erkennen Nun, das kann auf zahlreiche verschiedene Arten verwendet werden. Also, was ich gerne mache, ist, wenn ich das so etwas wie einen Overlayer-Bereich habe, würde ich so etwas wie ein Bild hinzufügen, was Sie hier machen können, und wir können dieses Bild hier hinzufügen, was nicht schlecht aussieht Nun, dieser Abschnitt hier ist im Wesentlichen der Grund, warum Sie möchten, dass er positioniert wird Wenn Sie also möchten, dass es höher positioniert wird, würden Sie im Grunde diese Option wählen, wenn Sie es niedriger haben möchten, hier, links , hier, hier rechts und dann dort in der Mitte. Jetzt können Sie auch „Cover enthalten“ oder „Benutzerdefiniert“ auswählen. Benutzerdefiniert bedeutet, dass Sie, Sie wissen schon, manuell auswählen müssen , wie hoch es ist, wie klein es ist und all das Zeug. Ich neige dazu, einfach Lebensläufe zu verwenden, das macht die Dinge einfach super einfach Und dann können Sie auswählen, welche Position Sie möchten. Und der sieht tatsächlich ziemlich gut aus. Was ich hier zum Beispiel tun werde, um es Ihnen zu zeigen, ist, dass wir die Option enthalten verwenden, die im Grunde nur sicherstellt, dass das gesamte Bild so oft als Hintergrund verwendet wird als Hintergrund verwendet , wie es nötig ist, um den Raum tatsächlich auszufüllen. Nun, was Sie hier tun können, ist weil das einfach ein bisschen komisch aussieht, Sie könnten dieses Overlay über dem Bild hinzufügen, diesen Abschnitt einfach stärker hervorheben, was letztendlich, wie Sie sehen, dazu beiträgt, dass das Element ein bisschen mehr hervorsticht und es einfach prominenter wird. Eine andere Sache, die Sie in Bezug auf Ihren Abschnitt tun können , ist, dass wir einfach alle von hier löschen und das Ganze einfach so vereinbaren lassen alle von hier löschen und das Ganze einfach , wie es zuvor war. Sie können also den Hintergrund des gesamten Körpers ändern. Wenn Sie also zum Beispiel möchten, dass es komplett rot ist, dann könnten Sie das tun. Nun, ich weiß nicht, warum du das tun würdest, und es wäre ziemlich seltsam für dich, das zu tun. Also lass uns das wieder ändern, weil ich glaube, die Tatsache , dass das alles rot ist, macht mir Angst. Lassen Sie uns das also zurückziehen. Zu weiß. Jetzt müssen Sie eigentlich nichts als Hintergrundfarbe für Ihren Körper angeben, aber Sie können auch Bilder hinzufügen. Wenn wir das zum Beispiel als Gesamtbild hinzufügen wollten , dann sieht das nicht und es ist sogar extrem verwirrend, aber Sie können es tatsächlich so machen. Du kannst es benutzen. Und das ist nur die Stärke von Web Flow. Es hilft Ihnen, wirklich einfach und ohne Stress und Programmieren wirklich kreative Designs zu erstellen . Hilft dir, alles ganz einfach zu machen. So können Sie Hintergründe letztendlich verwenden. Es ist wirklich einfach, wirklich einfach, und Sie können mit der Art der Hintergründe , die Sie verwenden, wirklich kreativ werden. Wenn wir zum Beispiel auf die Website meiner Markenagentur clementinhous.com gehen , können Sie diese Kreise sehen, hinter denen sich ein Schatten befindet. Das ist sehr subtil, aber es sieht auf der Website einfach so gut aus, und es ist einfach ein nettes kleines Feature, nur um den Hintergrund ein wenig hervorzuheben habe auch einen sehr ähnlichen Ansatz für diese Website für einen Kunden verwendet , wo wir im Grunde diese kleinen Muster, kleinen Kreise und Xs sind , nur damit es nicht superlangweilig und banal ist. Lassen Sie also Ihrer Fantasie freien Lauf und vergessen Sie natürlich nicht, dass der Hintergrund nur weiß ist. Sie können kleine Elemente hinzufügen, Sie können kleine Elemente hinzufügen um ihn interessanter aussehen zu lassen Wie dem auch sei, ich hoffe, dass Sie diese Lektion hilfreich finden, und ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 54. Webflow 101: Anzeigeeinstellungen und Reaktionsfähigkeit: Okay, also zeige die Einstellungen an und sorge dafür, dass deine Website auf allen Geräten responsiv ist. Wie können wir das machen? Nun, es ist wirklich einfach und unkompliziert, und Ihre Anzeigeeinstellungen können Sie hier oben auf Ihrem Bildschirm sehen . Derzeit haben wir also vier verschiedene Breakpoints im Spiel. Wir haben Ihren Basis-Breakpoint, wir haben Ihr Tablet, wir haben Landscape Mobile und wir haben Portrait Jetzt können wir drei weitere Breakpoints hinzufügen, einer davon ist der 12-80-Pixel-Breakpoint , der letztendlich gut für Ihr Macbook Air und andere Apple-Geräte ist, und Sie können auch Ihren 14-40-Pixel-Breakpoint und zuletzt Ihren 1920-Pixel-Breakpoint hinzufügen und zuletzt Ihren 1920-Pixel-Breakpoint Warum ist es nun wichtig, all diese verschiedenen Breakpoints zu haben all diese Nun, der Grund, warum es wichtig ist, ist, dass es Ihrer Website hilft, auf allen Geräten responsiv zu sein Und ich zeige dir jetzt, wie das geht. Wenn Sie die Website tatsächlich so betrachten, wie sie ist, können Sie feststellen, dass sie auf Tablets, im Querformat, im Hochformat und auch an allen anderen Breakpoints gut funktioniert Querformat, . Wenn wir nun tatsächlich damit beginnen, die Größe der Website zu ändern, können Sie feststellen, dass sie sich erheblich ändert. Wenn Sie nun zu unserer Test-Website zurückkehren und einfach versuchen, mit diesem speziellen Abschnitt herumzuspielen , den wir zuvor im Kurs erstellt haben, können wir hier sehen, dass er derzeit auf 1920 Pixeln und höher reagiert, aber leider sieht er ganz anders aus, wenn wir zum mobilen Bereich und sogar zum Basispunkt gehen . Wie können wir das also ändern? Nun, was wir tun müssen, ist im Wesentlichen damit zu beginnen, es als Ausgangspunkt wieder aufzubauen. Nun, der Basis-Breakpoint bestimmt letztlich alles, was nach oben und alles , was passiert, nach unten Lassen Sie uns also diesen speziellen Abschnitt am Basispunkt neu erstellen , und dann können wir im Grunde beginnen zu verstehen, wie der Responsive-Charakter des Webflows funktioniert Gehen wir also runter, um einen neuen Abschnitt zu erstellen, oder wir können genau das gleiche Padding erstellen Wir werden dort ein bisschen Polsterung an der Seite machen. Das heißt, einen Container hinzufügen. Perfekt. Da haben wir's. Und dann können wir anfangen, im Wesentlichen etwas hinzuzufügen. Und denken Sie daran, dass wir tatsächlich auf dem Hauptbruchpunkt aufbauen, dem Kernbruchpunkt, dem Basis-Breakpoint Wir bauen nicht auf diesem Abschnitt auf , der sich auf keines der Elemente auswirken wird Denn wenn Sie auf dem Basis-Breakpoint aufbauen, wirken Sie sich auf alles aus, was auf Mobilgeräte übertragen wird , und auch auf alles, was auf einen größeren Bildschirm übertragen Wenn Sie dagegen etwas am höchsten Breakpoint und auch am Breakpoint für mobile Portraits bearbeiten am höchsten Breakpoint und auch , bearbeiten Sie nichts Denken Sie also daran, dass der Basis-Breakpoint kaskadiert nach unten und auch nach oben. Aber wenn Sie am Ende der Breakpoints bearbeiten, Sie Dies gilt auch, wenn Sie den Breakpoint im Querformat bearbeiten Wenn Sie hier bearbeiten, wirkt sich dies auch auf diesen Haltepunkt aus, und wenn Sie im Tablet-Haltepunkt bearbeiten, wirkt sich dies auch auf diese beiden Es passiert auch andersherum. Wenn ich zum Beispiel diesen Breakpoint bearbeite, wirkt sich das auf diesen Breakpoint in diesem Breakpoint Wenn ich diesen Haltepunkt jedoch hinzufüge, wird dieser nicht bearbeitet, sondern er wird links bearbeitet Behalte das im Hinterkopf, denn es wird wirklich wichtig sein , wenn wir anfangen zu verstehen, wie du deine Website responsiv gestalten kannst, und ich werde dir in dieser Lektion den Prozess vorstellen, mit und ich werde dir in dieser Lektion den Prozess vorstellen, mit dem ich sicherstelle , dass meine gesamte Website jederzeit responsiv ist Sie entwerfen immer auf der Grundlage der grundlegenden Breakpoints. Denken Sie also bitte daran. Also, wenn wir das im Basis-Breakpoint-Bereich neu aufbauen , dann können wir einfach diesen Heldensplit nehmen Wir können diesem Container einen Diblock hinzufügen. Wir können ein Grid hinzufügen. Wir brauchen keine zwei. Wir brauchen nur einen, damit wir das machen können. Dann können wir das nehmen und Grid einen Diff-Block hinzufügen Links davon, was soweit gut aussieht Dann können wir einfach einen weiteren Di-Block zur anderen Seite hinzufügen und dann zurückgehen. Ein YouTube-Video hier, und da hast du es. Zum jetzigen Zeitpunkt sieht das momentan extrem squashartig aus. Also warum ist das so Nun, das liegt daran, dass die maximale Breite dieses spezielle Element derzeit bei 46% liegt. Wir wollen diese maximale Breite nicht. Wenn ich zum Beispiel anfange, das zu erhöhen, dann füllt es sich langsam aus. Wenn ich das also einfach auf Nichts ändere, dann füllt es im Grunde den gesamten Abschnitt aus Aber wir wollen ein kleines Muster drin haben, nur um sicherzugehen, dass es dem Bild nicht zu nahe Damit bin ich also ziemlich zufrieden. Jetzt können Sie sehen, weil wir alles am Basis-Breakpoint dupliziert haben , es ist nur am letzten Breakpoint innerhalb des Systems tatsächlich aktiviert und der Webflow reagiert Im Grunde müssen wir also damit beginnen, es hier zu entwerfen Okay? Also, wenn wir das zum Beispiel nehmen, können wir anfangen zu schauen, wie das aussieht. Ich bin also zufrieden damit, wie das aussieht. Ich bin zufrieden damit, wie das im Moment aussieht. Aber was wir tun können, ist, dass wir damit beginnen können, diese spezielle Schaltfläche zu ändern . Also ändern wir das. Wir können das für die beabsichtigten Zwecke loswerden. Wir brauchen das momentan nicht wirklich. Also ändern wir das. Wir ändern die Farbe in Gold. Wir können auch die Polsterung ändern , damit es ein bisschen schöner aussieht Halten Sie auch hier einfach die Wahltaste gedrückt, um sicherzustellen, dass ich beide gleichzeitig ändere Wir können auch etwas Freiraum zum Atmen hinzufügen und dann mit der Bearbeitung beginnen. Das Lightbox-Element, bei dem es einfach darum geht , das zu ändern, die Farbe zu ändern Da haben wir's. Sobald wir damit zufrieden sind, wie ein Abschnitt aussieht. Wir können dann anfangen zu schauen, wie es auf anderen Geräten aussieht. Lassen Sie mich hier einfach einen farbigen Hintergrund hinzufügen , damit wir genau wissen, was wir tun. Und lassen Sie uns das tatsächlich in eine schöne lila Farbe ändern . Einfach passend. Da haben wir's. Perfekt. Ich weiß sogar ein bisschen mehr Blau. Perfekt. Jetzt haben wir diesen Abschnitt. Schauen wir uns das also an jedem Breakpoint an, um zu sehen wie es auf einem etwas größeren Bildschirm aussieht. Das sieht immer noch gut aus. Damit bin ich zufrieden. Auf einem noch größeren Bildschirm sieht es immer noch gut aus. Damit bin ich zufrieden. Wir kommen hierher und das sieht in diesem zweiten Abschnitt gut aus. Gehen wir jetzt zum Tablet. Okay. Hier werden die Dinge etwas knifflig. Im Moment ist das also offensichtlich ein bisschen Squash, richtig Es sieht nicht wirklich gut aus, also was können wir tun? Nun, wir können das etwas kleiner machen. Denken Sie daran, wenn ich hier bearbeite, hat das keinen Einfluss auf das, was nach oben geht. Es wirkt sich nur auf den Abwärtstrend aus. Nochmals, wenn du hierher gehst, sind es immer noch 38. Ich war hier, jetzt sind es 30. Nun, wie gesagt, das wird sich auch auf den Abstieg auswirken. Wenn ich es also hier bearbeite, wirkt sich das auch auf die beiden mobilen Optionen aus. Wenn ich es also auf dem Tablet bearbeite, wirkt sich das auch auf die beiden mobilen Einstellungen aus. Also werde ich das bearbeiten, damit es ein bisschen kleiner aussieht, und dann werde ich die Größe reduzieren. Ich denke, wenn ich sie Seite an Seite haben will, muss ich das viel kleiner machen, also lass uns das einfach auf zehn reduzieren. Tatsächlich sieht das nicht wirklich gut aus. Vielleicht sollte ich es einfach so lassen und es so formulieren. Und dann kann ich das einfach reduzieren, es ein bisschen kleiner aussehen lassen. Und dann kann ich das hier zentrieren, damit es zentrierter aussieht und es ein bisschen kleiner machen. Und das sollte. Das sieht viel besser aus, okay? Lass uns das einfach ein bisschen reduzieren . Da haben wir's. Das sieht viel besser aus. Das ist viel besser abgestimmt. Jetzt müssen wir uns das Tablet ansehen, also schauen wir uns an, wie es im Querformat aussieht. Also hier fangen die Dinge an , sehr, sehr eng auszusehen, okay? Also haben wir nicht viel Platz. Und wenn du darüber nachdenkst, wenn du dein Handy in der Hand hältst, wird es wirklich Mist aussehen, und du wirst wahrscheinlich nicht alle Elemente sehen können . Wie können wir das also ändern? Nun, wir können zum Raster gehen, wir können das Raster bearbeiten, und es funktioniert nicht wirklich so, also lasst uns versuchen, unten einen Abschnitt hinzuzufügen und es ein bisschen so zu machen. Also das sieht tatsächlich um einiges besser aus. Nun, das hat hier unten ein kleines Element, also lassen Sie uns vielleicht das Raster verkleinern , um die Reihe zu verkleinern, um sie näher zusammenzubringen . Und das sieht zehnmal besser aus. Das sieht 100-mal besser aus. Und wir können es, selbst wenn wir wollen, wenn wir näher kommen wollen, etwas nach oben ziehen, wodurch es noch kompakter aussieht. Aber das müssen wir nicht tun. Du kannst es einfach so lassen, wie es ist. Aber wie du sehen kannst, weil ich es hier im Breakpoint für mobile Landschaft bearbeitet habe , hat das keinen Einfluss auf alles, was nach oben geht. Es ist immer noch dasselbe Es reagiert also auf allen Geräten, solange es vom Kern-Breakpoint aus nach unten oder nach oben geht Kern-Breakpoint aus nach unten oder nach oben geht Also hier, wir haben es hier ziemlich gut aussehen lassen. Schauen wir uns jetzt an, wie es auf dem mobilen Portrait aussieht. Und denken Sie daran, wenn ich es hier bearbeite, wird es automatisch in ein mobiles Portrait umgewandelt Es sieht also schon gut aus. Es sieht schon so aus , als ob es sehr gut präsentiert ist. So müssen Sie sich also letztendlich die Gestaltung von Websites ansehen , die responsiv sind. In erster Linie erstellen Sie es am Kernbruchpunkt, dem Basis-Breakpoint, und dann bearbeiten Sie es im Wesentlichen nach unten und dann nach oben, um sicherzustellen , dass jeder einzelne Abschnitt perfekt ist, egal auf welchem Gerät Sie ihn betrachten Ich hoffe also, dass Sie diese Lektion hilfreich finden. Wenn Sie Fragen haben, lassen Sie es mich bitte wissen. Ich bin hier, um Sie zu unterstützen, wo ich kann, aber ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns dort. 55. Webflow 101: Bildoptimierung & faule Last: Okay, in Bezug auf die Bildoptimierung und das verzögerte Laden müssen Sie Folgendes wissen, und es ist wirklich einfach Also zum Beispiel, wenn Sie ein Bild haben, das sich auf Ihrer eigentlichen Homepage im Hero-Bereich befindet , und Sie möchten, dass es schneller geladen wird als alle anderen Elemente auf Ihrer Website. Dann müssen Sie letztendlich sicherstellen, dass dieses bestimmte Bild priorisiert wird denn wenn jemand Ihre Website besucht, möchten Sie nicht darauf warten, dass dieses Bild geladen wird Denn wenn Sie eine Website haben, die Sie gerade besuchen und das Bild letztendlich erst 3 Sekunden später geladen wird, wird das in Bezug auf Ihr Website-Design nicht gut aussehen Bezug auf Ihr Website-Design Es wird Ihr Unternehmen sehr schlecht widerspiegeln denn wenn Sie eine Website nicht richtig funktionieren lassen können, wie sollen Sie dann Ihre Kunden richtig bedienen ? Wie können wir das also ändern? Und wie können wir die Bilder priorisieren , die auf unsere Website geladen werden Also werden sie so schnell wie möglich geladen? Nun, es gibt tatsächlich ein paar Möglichkeiten, das zu tun. Die erste Möglichkeit besteht also darin, letztendlich das Bild selbst auszuwählen. Und drücken Sie auf dieses kleine Zahnrad, wodurch letztendlich etwas angezeigt wird, das dem, was in diesem Abschnitt hier steht, den Bildeinstellungen, sehr ähnlich was in diesem Abschnitt hier steht, den Bildeinstellungen, Sobald Sie tatsächlich auf das kleine Zahnrad geklickt haben und letztendlich Zugriff auf die Einstellungen haben, gibt es in Bezug auf das Laden einige Optionen , die Sie hier sehen können Das erste ist Lazy Load. Lazy Load bedeutet im Grunde, dass es in der Reihenfolge geladen wird, in der die Seite eingerichtet ist. Es wird also nichts priorisieren. Jetzt ist die nächste Option Eager Load. Das bedeutet, dass es mit der Seite geladen wird. Es wird also im Grunde so schnell wie möglich geladen und als Priorität festgelegt. Und dann haben wir Auto. Das bedeutet also im Wesentlichen, dass das, was der Browser für die höchste Priorität hält , zuerst geladen wird, was wir natürlich nicht tun wollen , weil verschiedene Browser unterschiedliche Prioritäten haben können, also wählen wir Eagle Load. Nun, das wird sicherstellen, dass, wenn jemand unsere Website besucht, grundsätzlich. Dieses Bild wird an den Anfang der Warteschlange verschoben. Es wird zuerst geladen, was wir wollen. Das wird also für eine Reihe verschiedener Elemente sehr wichtig sein . Sie möchten dies zum Beispiel wirklich auch für Ihr Logo tun . Sie möchten nicht, dass Ihr Logo letztendlich nach allem anderen auf der Website geladen wird. Sie möchten also sicherstellen , dass es durchsetzungsfähig ist und der Website sagt, hören Sie zu, ich muss zuerst laden, weil ich sehr wichtig bin, und das ist letztendlich das, was die Leute sehen werden , sobald sie auf Ihre Website kommen Stellen Sie sicher, dass Sie Ihren Bildern Priorität einräumen, insbesondere Bildern in Ihrem Heldenbereich , über den wir im Laufe der restlichen Lektionen in dieser speziellen Phase etwas mehr lernen werden der restlichen Lektionen in dieser speziellen Phase Und alle Bilder, von denen Sie persönlich glauben, dass für Ihre spezielle Website, Ihr Unternehmen oder Ihre Marke Priorität haben, stellen Sie sicher, dass Sie sie mit Eagle Load priorisieren , da sie dadurch zuerst geladen werden und Ihrem Benutzer das bestmögliche Erlebnis auf Ihrer Website geboten wird. Wie dem auch sei, ich hoffe wirklich, dass diese Lektion wertvoll war. Ich weiß, es war kurz und bündig, aber ich wollte nur sichergehen, dass Sie den Unterschied zwischen den beiden Ladeeinstellungen verstanden haben, um sicherzustellen , dass Ihre Website so gut wie möglich ist. Ich sehe dich in der nächsten Lektion. 56. Webflow 101: Positionieren: In dieser Lektion werden wir uns auf die Positionierung konzentrieren Derzeit gibt es statische, relative, absolute, fixe und permanente Optionen. Was bedeuten sie und wie kann man sie verwenden? Fangen wir mit statisch an. Statisch ist im Grunde die Standardoption innerhalb von Webflows. Wenn Sie ein neues Element, Bild oder Text oder was auch immer hinzufügen, wird ihm automatisch eine statische Position zugewiesen. Was ist nun, wenn wir diese beiden Verwandten ändern? Was bedeutet relativ überhaupt? Nun, relativ ist eigentlich statisch sehr ähnlich, bietet aber mehr Positionierungsmöglichkeiten. Wenn wir nun relativ wählen, können wir die tatsächliche Position des Elements relativ zu sich selbst ändern . Eine Sache, über die Sie jetzt nachdenken sollten, ist Ihr Z-Index, aber darauf kommen wir etwas später zurück. Jetzt ist die nächste Option absolut. Wenn Sie Absolut wählen, können Sie das hier sehen, und es beschreibt es tatsächlich hier der eigentlichen Website selbst, positioniert ein Element absolut, positioniert ein Element absolut, relativ zu seinem am nächsten positionierten übergeordneten oder es fällt auf das Hauptelement. Wenn wir uns das hier ansehen, befindet sich das Bild also tatsächlich innerhalb des Bereichs. Der Abschnitt ist also dem Bild übergeordnet. Im Moment hat der Abschnitt keine Einstellungen. Das Bild wird also automatisch absolut in Bezug auf den Körper positioniert, der der nächste Elternteil ist. Wie können wir das Bild also innerhalb des Bereichs behalten? Nun, es ist eigentlich ganz einfach. Alles, was wir tun, ist, die Positionierung des Abschnitts auf relativ zu setzen. Und hier, jetzt können Sie sicherstellen, dass das Bild für den Abschnitt relevant ist da der Abschnitt das relevanteste übergeordnete Element für das Bild ist relevanteste übergeordnete Element für , wie Sie hier sehen können Was passiert nun, wenn wir „Fixed“ wählen? Korrigiert bedeutet nun letztlich, dass das Element für das Browserfenster relevant ist und beim Scrollen der Seite an Ort und Stelle bleibt also zum Beispiel „Fixiert“ auswählen und es dann in der oberen linken Ecke haben, egal wohin wir scrollen, ist es jetzt in dieser oberen linken Ecke fixiert Sie können hier sehen, dass es für den Körper relevant ist, und das kann nicht geändert werden. Wie kann das sehr nützlich sein? Nun, wenn wir diese Navbar als Element wählen und sie im Moment nur als relativ gesetzt ist, was nur der Standard für eine Navbar ist, aber wenn wir sie auf fest setzen, dann können Sie hier sehen, dass sie am oberen Rand der Navigationsleiste fixiert ist oberen Rand der Navigationsleiste fixiert Also egal, wo wir scrollen, es wird immer hier sein Was wir nun tun können, ist, das Ganze so zu verteilen , dass die Navigationsleiste immer an ihrem Platz ist, wenn wir herausscrollen . Daher können Sie die Navigationsleiste nicht verlieren, egal wo Sie auf dem Bildschirm scrollen. Dies ist äußerst nützlich, da Sie beim Erstellen einer Webseite die NAF-Leiste sehen möchten, NAF-Leiste sehen möchten Sie durch die Seite scrollen, damit Ihr Benutzer letztendlich auf der gesamten Website navigieren kann, ohne erneut ganz nach oben scrollen zu müssen, um zur Navigationsleiste zurückzukehren Das kann für uns also sehr nützlich sein. Nun gibt es eine andere Möglichkeit , Sticky grundsätzlich zu verwenden, wobei Sticky ein einzigartiger Ansatz ist um die Position des Elements zu fixieren. Und ich werde dir zeigen warum. Sticky ist im Wesentlichen dasselbe wie Fix, aber es hat ein paar zusätzliche Einstellungen, die Sie verwenden können, was letztendlich bedeutet, dass Sie die Positionierung des Sticky-Elements tatsächlich manipulieren können Positionierung des Sticky-Elements tatsächlich manipulieren , um es im Grunde genommen reaktionsschneller zu machen und nur ein bisschen mehr Kontrolle darüber zu haben ein bisschen mehr Kontrolle darüber zu wohin es herunterscrollt, und letztendlich, wann es aufhört zu scrollen. Eine Sache, auf die Sie achten sollten, ist der Z-Index, da dieser als Tool äußerst nützlich sein kann. Wenn wir also diese Menge an Animationen nehmen und diese Relative angeben, war sie vorher natürlich statisch, was Standard ist, aber wenn wir sie als relativ festlegen, dann, wenn wir im Grunde nach unten scrollen, auf der Seite, können Sie sehen, dass sich die Navigationsleiste derzeit wie folgt über die Lottie-Animation bewegt Was wäre nun, wenn wir, aus welchem Grund auch immer, dieses spezielle Element bei allem auf der Website im Vordergrund steht, sodass es, selbst wenn die Navigationsleiste darüber scrollt, immer noch als über möchten, dass dieses spezielle Element bei allem auf der Website im Vordergrund steht, sodass es, selbst wenn die Navigationsleiste darüber scrollt, immer noch als über der Navigationsleiste eingestuft wird der Navigationsleiste nur um die Webseite interessant zu machen. Nun, wir können es so machen. Der Z-Indexabschnitt hier macht im Wesentlichen das Element mit der höchsten Nummer zum prominentesten Element. Hier haben wir zum Beispiel 99999 so eingegeben, dass wenn wir es tatsächlich ansehen und die Webseite nach unten scrollen, es tatsächlich über die Navigationsleiste geht, was ziemlich interessant ist, aber wir können es sogar noch interessanter machen Also können wir dieses spezielle Bild als relativ bezeichnen. Wir können dieses Bild als relativ bezeichnen, dieses Bild als relativ, und dieses Bild ist relativ. Nun, was wir hier tun können, ist, dass wir es einfach vom Z-Index aus extrem hoch machen können . Egal, was über diese Bilder scrollt, sie werden immer ganz oben sein Sie können nicht überscrollt werden. Und nur um Ihnen tatsächlich zu zeigen, was der Z-Index macht. Wenn wir jetzt nach unten scrollen, können Sie die Lotty-Animation sehen, die einen höheren Z-Index als die Navigationsleiste hat Sie geht über die Navigationsleiste. Aber Sie können hier sehen, dass dieses Bild keine Z-Index-Einstellungen hat. Dieser tut es. Dieser tut es, dieser nicht. Schauen wir uns also an, wie es sich darauf auswirkt. Wir scrollen rüber. Sie können hier sehen, dass das die Navigationsleiste überschreibt, und es geht nach oben, was super cool aussehen kann Wie dem auch sei, ich wünsche Ihnen viel Spaß mit dieser Lektion ohne Positionierung und freue mich darauf, Sie in der nächsten Lektion zu sehen Wir sehen uns bald. 57. Webflow 101: Heldenabschnitte: Abschnitte für Helden. Wie baut man also die perfekte Heldenabteilung auf? Diese Helden-Sektion ist zweifellos perfekt, aber du magst auch nichts davon, dass sie perfekt ist Was macht eigentlich einen großartigen Heldenbereich für Ihr Unternehmen und Ihre Marke Nun, das hängt von dem Ziel ab, das Sie erreichen möchten. Wenn Sie beispielsweise die Website dieser Marke aufrufen, versucht die Website dieser Marke, Einzelpersonen, Paare und Jugendliche in ihren Marketing-Trichter einzubeziehen, und der Marketing-Trichter ist spezifisch auf ihre spezifischen Bedürfnisse Wenn Sie also beispielsweise eine Einzelperson sind und Panikattacken haben, würden Sie auf diese Schaltfläche klicken und Sie würden zu einer Seite weitergeleitet, und Sie würden zu einer Seite weitergeleitet speziell für Panikattacken vorgesehen ist Auch hier gilt: Wenn ihr ein Team seid und letztendlich Wut zum Ausdruck bringt und ihr wollt, dass das geklärt wird, dann habt ihr eine Seite, die sich speziell mit Wut befasst. Nun, das ist offensichtlich etwas , das für jede einzelne Marke anders ist. Letztlich sollte Ihnen der Heldenbereich auf jeder einzelnen Website buchstäblich genau das bieten, was Sie wissen müssen, sobald Sie auf der Startseite landen. So sagen wir zum Beispiel für Clementine House, Website meiner Brannan Agency, die Website meiner Brannan Agency, den Leuten in sechs einfachen Worten genau, was wir tun, nennen die ehrgeizigen Start-ups Okay. Also sagen wir Ihnen buchstäblich, dass wir das tun. Wir nennen die ehrgeizigen Startups von morgen. Wenn wir nun zu dieser Beispiel-Website gehen, können wir sehen, dass Ihnen im Heldenbereich genau gesagt wird, was Sie von dieser Website erwarten können. Das ist also offensichtlich eine Fitness-Influencerin namens Sandra Leon's. Erreiche deine Fitnesswerte. Nach meinem Bachelor-Abschluss in Ernährung und Fitnesstraining begann ich, mit Menschen auf der ganzen Welt zusammenzuarbeiten und ihr Leben für immer zu verändern. Sie wissen also genau, was Sie bekommen, sobald Sie auf dieser Homepage landen, und Sie wissen genau, was Sie erwartet. Sie können also grundsätzlich davon ausgehen, das ist für mich oder das ist nicht für mich. Schauen wir uns ein anderes Beispiel an, nämlich HubSpot. HubSpot sagt Ihnen also buchstäblich genau, was sie anbieten. HubSpot-Kundenplattform. Wachsen Sie also besser mit HubSpot. Software, die leistungsstark und nicht überwältigend ist und Ihre Daten, Teams und Kunden nahtlos auf einer Kundenplattform verbindet Teams und Kunden nahtlos auf , die mit Ihrem Unternehmen wächst Du bist genau das, was du bekommen wirst. Und Sie werden jede einzelne Marke da draußen sehen , die sich wirklich darauf konzentriert, ein bestimmtes Ziel zu erreichen und sich auf eine bestimmte Weise zu positionieren, sie wird sicherstellen, dass sie genau dieses Prinzip befolgt. In den ersten 3 Sekunden nach der Landung auf der Startseite erfahren Sie genau, wer sie sind . Wenn Sie nun an Webflow arbeiten und Ihr eigenes Layout und Ihren eigenen Heldenbereich selbst erstellen möchten , dann ist das absolut in Ordnung Jetzt bieten wir natürlich Vorlagen an, die Sie verwenden können, und sie enthalten bereits Heldenbereiche. Wenn Sie jedoch Ihr eigenes auswählen möchten, können Sie letztendlich zum Bereich Anzeigenlayout wechseln. Und wählen Sie im Grunde ein Layout, das dem, das ich Ihnen gerade gezeigt habe, sehr ähnlich ist. Jetzt müssen Sie natürlich möglicherweise den Text ein wenig ändern den Text ein wenig und die Farbe ändern und ein paar Muster hinzufügen und einen Hintergrund hinzufügen. Aber letztendlich können Sie damit einen Heldenbereich erstellen, der wirklich die Aufmerksamkeit von jemandem erregen kann , denn das ist der Schlüssel. Du musst sicherstellen, dass du in den ersten 3 Sekunden beim Aufbau deiner Helden-Sektion Leuten letztendlich sagst, das ist es, was wir tun, so können wir dir helfen. Dies wird eines der wichtigsten Dinge sein, um sicherzustellen, dass die Leute nicht auf Ihre Website kommen und sie dann sofort wieder verlassen. Sie müssen innerhalb der ersten 3 Sekunden nach der Landung auf Ihrer Startseite genau wissen, was Sie ihnen anbieten können ersten 3 Sekunden nach der . Dies ist der Heldenbereich. Genau darauf sollten Sie 80% Ihrer Aufmerksamkeit richten , bevor Sie mit dem Aufbau des Restes Ihrer Website beginnen. Stellen Sie sicher, dass das perfekt ist. Stellen Sie sicher, dass die Buchstaben und Wörter , die Sie verwenden, so wenig wie möglich sind. So einfach wie möglich und zeigen genau, was Sie dem Kunden bieten können. Stellen Sie sicher, dass es einen Aufruf zum Handeln enthält, und stellen Sie außerdem sicher, dass das Bild relevant ist und zeigt, was Sie dem potenziellen Kunden oder Kunden anbieten können Wie dem auch sei, ich hoffe, dir hat diese kurze Lektion über Helden-Sektionen gefallen diese kurze Lektion über Helden-Sektionen Ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 58. Webflow 101: CMS und dynamische Inhalte: Okay, was sind CMS und dynamischer Inhalt? Und wie können wir es nutzen, um den Inhalt unserer Website besser zu verwalten? Nun, Ihr CMS ist im Wesentlichen Ihr Content-Management-System. Und ich zeige Ihnen ein Beispiel für eine meiner Websites und wie wir unser CMS-System so strukturieren, dass die Verwaltung der Website sehr einfach ist. Wie Sie hier sehen können, sind dies die CMS-Einstellungen, und wir haben mehrere verschiedene CMS-Systeme im Spiel. Eines davon sind die Projekte. Im Projektumfeld haben wir also jeden einzelnen Kunden , mit dem wir in den letzten, ein paar Jahren zusammengearbeitet haben , der regelmäßig von unserem Team aktualisiert wird. Wenn Sie nun auf jedes Projekt klicken , werden Sie feststellen, dass wir bestimmte Tabs haben, die in jedem einzelnen Projekt ausgefüllt werden müssen . Also zum Beispiel der Name des Kunden, der Slog, der im Grunde die Erweiterung für die URL ist Wir haben auch speziell den Markennamen Project Insight Das ist also im Wesentlichen ein Einblick in das, was das Unternehmen tatsächlich tut und auf welchem Markt es tätig ist Wir haben das Logo, wir haben die Dienstleistungen links, die Dienstleistungen werden nach rechts geliefert. Wir haben das Problem , das sie haben, die Lösung, die ihnen von uns gegeben wurde. Der Kunde und der Name und die Rolle, wir haben ein echtes Testimonial vom Kunden selbst, mehr Bilder zum eigentlichen Projekt, und dann haben wir tatsächlich einen Link zum nächsten Projekt in der Pipeline und dann auch einen Projekt-Link, damit sie das Projekt tatsächlich sehen können das Projekt tatsächlich sehen wenn sie auf unserer Homepage darauf klicken Nun zum CMS, es ist wirklich einfach, ein CMS-System zu erstellen, und alles, was Sie tun müssen, ist einfach auf die kleine Schaltfläche hier zu klicken, um eine neue Sammlung zu erstellen. Wenn Sie nun eine neue Sammlung erstellen, haben Sie letztendlich die Wahl , verschiedene Felder hinzuzufügen. Mit verschiedenen Feldern meine ich nun einfach die verschiedenen Dinge, die Sie auf der Hauptseite Ihrer Website ändern möchten . Vielleicht möchte ich zum Beispiel eine Sammlung erstellen, die sich ausschließlich auf die Blogs und die Nachrichten konzentriert , die wir auf der Clementine House-Website Wenn wir zum Beispiel in unseren Blog und unsere Nachrichten gehen, würden Sie einfach auf Feld hinzufügen klicken, und dann würden wir im Grunde die Felder erstellen, die wir für jede einzelne Seite für jeden Blogbeitrag benötigen Wenn wir zum Beispiel auf die Clementine House-Website gehen und zu einem echten Blogbeitrag gehen, wählen wir zum Beispiel einfach diesen aus Ich kann hier sehen, dass wir das mittlere Bild haben, das letztendlich das Bild ist, das hier ist Wir haben auch das sekundäre Bild, falls Sie ein weiteres Bild innerhalb des eigentlichen Blockposts hinzufügen möchten, ein drittes Bild, falls Sie ein weiteres Bild hinzufügen möchten, Text zum Artikel , den Sie hier finden . Dann haben wir auch das Thema ausgewählt. Also im Grunde, für welches Thema ist der Artikel relevant? Ist es Markenstrategie, Schaffung einer Markenidentität oder Markenbenennung. Wir haben auch die veröffentlichte Uhrzeit und das Datum, die Sie hier sehen können, direkt unter dem Titel auf der eigentlichen Blogpost-Seite. Wir haben dann den Link zur Projektseite, dem es sich im Wesentlichen um die URL handelt, die tatsächlich aktiviert wird, wenn Sie auf der Hauptseite des Blogs auf das Bild klicken. Wir haben auch den Autor , der hier unten zu sehen ist. So kannst du dir so viel Zeit sparen , wenn du zum Beispiel neue Blogbeiträge oder neue Produkte oder neue Projekte hinzufügst . Du kannst einfach alles im Backend so verwalten. Wenn wir also zum Beispiel, wissen Sie, den Titel dieses speziellen Blogposts ändern wollen , warum Markentreue kompletter Unsinn ist, können wir zu den Neuigkeiten des Blogbeitrags gehen und dann können wir uns im Grunde damit befassen, warum Marke Unsinn ist Klicken Sie hier, um es wirklich zu sehen. Anstatt also jedes einzelne Element auf der eigentlichen Website selbst zu ändern , können wir diese Elemente einfach hier bearbeiten. Ändern Sie den tatsächlichen Text des Artikels. Wir können weitere Bilder hinzufügen. Wir können das tatsächliche Bild des tatsächlichen Vorschaubilds ändern , was das ist Wir können ändern, wer den Blogbeitrag tatsächlich geschrieben hat. Wir können den Insight-Text ändern , um die Leute dazu zu bringen, den Blogbeitrag tatsächlich zu lesen. Wenn wir das zum Beispiel wirklich veröffentlichen, speichern und dann veröffentlichen wir ihn, und wenn wir dann auf der echten Website nachschauen, dann können Sie sehen, dass er auf der Hauptwebseite automatisch aktualisiert wird , obwohl wir ihn gerade im CMS-System im Backend der Website geändert haben. Jetzt können Sie Ihrer Webseite ein CMS-Element hinzufügen indem Sie die Sammlung einfach so hinzufügen. Und Sie können alle Lektionen, die Sie in dieser speziellen Phase des Kurses bereits gelernt haben, verwenden Lektionen, die Sie in dieser speziellen Phase des Kurses bereits gelernt haben , um dann beispielsweise jedem Abschnitt einen DIF-Block hinzuzufügen, dann können Sie auch das Bild hinzufügen Dann müssen Sie nur noch mit einem Doppelklick auf das eigentliche System klicken , mit dem Sie es verbinden möchten, und es zieht automatisch alle Elemente, die Sie in diesem bestimmten CMS-System haben, nach vorne Elemente, die Sie in diesem bestimmten CMS-System haben , und Sie können es letztendlich so anzeigen, wie Sie möchten, wie Sie möchten, Sie sich am besten fühlen. Und Sie können beispielsweise ein Bild innerhalb dieses bestimmten Elements hinzufügen , und jedes andere Element wird automatisch für Sie aufgefüllt wird automatisch für Zum Beispiel möchten wir kein Bild auswählen. Wir wollen das Bild tatsächlich aus dem Blogbeitrag holen. Also fügen wir das Hauptbild hinzu. Und hier drücken Sie auf jedes einzelne Bild, das sich im Backend der Website und des CMS-Systems befindet, ohne dass wir einen Finger rühren müssen. Wir können also zunächst so viele hinzufügen , wie wir wollen. Wir können den Header beispielsweise in jedem Dave-Block hinzufügen beispielsweise in jedem Dave-Block . anstatt sie alle abtippen zu müssen, hatten wir nur den Namen des eigentlichen Abschnitts, und das ist der Tag. Das sieht natürlich nicht besonders gut aus, aber du verstehst schon , was ich meine, oder? Es geht darum, so viel Zeit wie möglich zu sparen. Und wenn Sie das können und wenn Sie das CMS-System wirklich zu Ihrem Vorteil nutzen können , dann wird Ihre Website sehr einfach zu verwalten sein, und Sie werden eine Menge Zeit sparen, wenn es darum geht , Dinge zu ändern und Ihnen letztendlich das Leben mit der Verwaltung Ihrer Website zu erleichtern. Wie dem auch sei, wir werden uns später im Kurs eingehender mit CMS-Systemen befassen. Seien Sie gespannt darauf, aber ich hoffe, Ihnen hat diese Lektion gefallen, und wir sehen uns bald. 59. (Remastered Audio und 16: Okay, wir werden also bei Null anfangen und unsere Website gemeinsam erstellen. Als Erstes müssen Sie also die Struktur der Website erstellen. Und das können wir ganz einfach tun, indem wir einige dieser Bibliotheken verwenden , die in Webflow erstellt Ich habe schon ein paar installiert, aber Sie können viele davon bekommen Diejenigen, die ich normalerweise verwende, haben im Grunde die meisten Optionen. Wenn ich eine Website erstelle, möchte ich sicherstellen , dass ich die verschiedenen Formate und Abschnitte zur Auswahl habe. Und dieser ist einer meiner Favoriten. Lass mich sehen. Diese haben nicht wirklich eine große Auswahl. Dieser hat nicht so viel Auswahl, aber Sie können ihn einfach installieren, indem Sie auf diese Schaltfläche klicken, und dann einfach die Website auswählen, auf der Sie ihn installieren möchten. Jetzt habe ich tatsächlich schon zu viele Bibliotheken auf meiner Website. Ich kann also kein neues installieren. Gehen wir also zurück und ich kann sie einfach verwenden, weil dies sowieso meine Lieblingsbibliotheken sind , sodass Sie wählen können, welche Bibliothek Sie möchten Aber für den Zweck dieses Videos werde ich einfach die verwenden, mit der ich am besten vertraut bin, und auch die, die ich für die beste halte Und natürlich kannst du diese auswählen, wenn du wirklich willst, und es ist wirklich eine tolle Bibliothek, die du benutzen kannst. Und im Grunde ist eine Bibliothek nur eine Auswahl von Abschnitten, mit denen Sie eine Website zehnmal schneller erstellen können . Also, okay, fangen wir damit an , die Homepage zu erstellen. Also werden wir die Benutzeroberfläche ohne Titel verwenden, was ich wirklich liebe Es hat jede Menge verschiedene Optionen. Es ist wirklich großartig. Wählen wir eine Navbar. Okay. Lass uns diesen wählen. Nein, lass uns eigentlich ein paar andere wählen. Ja, lass uns tatsächlich diesen wählen, denn das sind Fotos da unten. Also ziehst du die NaF-Leiste buchstäblich per Drag-and-Drop in den Hauptteil der Website Und es ist geschafft. Es ist supereinfach. erstellen Später im Kurs werde ich Ihnen zeigen, wie Sie eine universelle Navbar , sodass, wenn Sie Ihre Navbar auf einer Seite ändern, dies auf der gesamten Website geändert wird , und das ist ganz einfach. Mach dir keine Sorgen. Aber ja, ich werde dir später zeigen , wie das geht. Denken Sie daran, dass wir uns derzeit nur darauf konzentrieren, die Struktur der Seiten der Website zu erstellen . Wir betrachten keine Farben, wir betrachten keine Bilder Wir konzentrieren uns auf nichts anderes als , die Abschnitte an der richtigen Stelle zu platzieren Also hier suche ich nach einer Helden-Sektion, ich denke, dass diese in Bezug auf das, was wir brauchen, ziemlich gut funktionieren wird. Ja. Okay, perfekt. Ja. Also weißt du, das wird es uns ermöglichen, den Leuten buchstäblich genau zu sagen , warum sie mehr Zeit auf unserer Website verbringen sollten. Denken Sie an die drei Fragen, die jede einzelne Person stellen wird sich jede einzelne Person stellen wird, wenn sie auf Ihre Website kommt. Erstens, sind sie am richtigen Ort, also müssen Sie sicherstellen, dass sie wissen, dass sie am richtigen Ort sind. Nummer zwei, kann ich dir vertrauen, weshalb wir jetzt nach einer Art Feature-Bereich suchen ? Ähm, um zum Beispiel die verschiedenen Leute zu zeigen , mit denen wir zusammengearbeitet haben, oder, du weißt schon, die verschiedenen Logos , die wir kreiert haben, oder die verschiedenen Marken die verschiedenen Logos , die wir kreiert haben, oder die verschiedenen Marken, mit denen wir zusammengearbeitet haben. hängt natürlich von der Art der Dienstleistung ab, die Sie anbieten. Und dann ist die dritte Frage , die sie sich im Grunde stellen werden, okay, was kannst du eigentlich für mich tun? Denken Sie also daran, wenn Sie eine Homepage erstellen. Erste Frage, bin ich am richtigen Ort. Sie müssen diese Frage beantworten. Nummer zwei, kann ich Ihnen vertrauen, weshalb wir den Feature-Bereich hinzugefügt haben? Und dann Nummer drei, was kannst du noch für mich tun? Wie kannst du mir wirklich helfen? dann können wir anfangen, uns verschiedene Dienste anzusehen? So können wir die verschiedenen Dienste tatsächlich präsentieren. Schauen wir uns diesen Abschnitt mit den Funktionen an. Okay. Vielleicht dieser. Vielleicht dieser. Ja. Das sollte ziemlich gut aussehen. Also habe ich buchstäblich darauf geklickt und es wurde direkt zur Website hinzugefügt Okay, perfekt. Perfekt, perfekt. Das sieht also ziemlich gut aus. Und auch hier konzentrieren wir uns nicht auf Farben, wir konzentrieren uns im Moment auf nichts anderes als auf die Struktur. Der Grund, warum wir das tun , ist, dass wir einfach nach einigen Testimonials oder dem Bewertungsbereich suchen Der Grund, warum wir das so machen, ist einfach, damit wir uns darauf konzentrieren können, die Website zu erstellen, und dann können wir uns danach auf die letzten Details konzentrieren die letzten Details So sollte es laufen. Denn wenn Sie versuchen, alles zusammen zu machen, verbringen Sie am Ende viel zu viel Zeit verbringen Sie am Ende viel zu viel Zeit damit, alles richtig zu machen und alles perfekt zu machen, anstatt nur 80% der Arbeit zu erledigen, wenn Sie tatsächlich die Struktur der Website erstellen. alles richtig zu machen und alles perfekt zu machen, anstatt nur 80% der Arbeit zu erledigen, wenn Sie tatsächlich die Struktur der Website erstellen. Okay, wir haben einen Abschnitt mit Testimonials, der gut ist. Schauen wir uns das Hinzufügen an, wie eine kleine Blog-Seite, nur um zu zeigen, dass wir Experten in dem sind , was wir sagen Okay. Perfekt. Das haben wir. Das sieht gut aus. Und dann glaube ich, alles, was wir jetzt brauchen, ist eine Fußzeile Okay, schauen wir uns die Fußzeilen an. Mal sehen, welcher am besten zu uns passt. Okay, dieser ist nett und einfach. Und hör zu, denk dran, wir werden, du weißt schon, die Tabs ändern und, du weißt schon, alles andere danach. Nun, eine Sache, die manchmal passiert, wenn Sie diese Vorlagen verwenden, ist, dass sie voreingestellte Breiten und Größen und Höhen und so weiter mit Abständen haben Größen und Höhen und so weiter mit Abständen Manchmal, besonders bei dieser speziellen Vorlage und dieser Bibliothek, ist die Breite also dieser speziellen Vorlage und dieser Bibliothek, immer auf 126 festgelegt Ich bin mir nicht sicher, warum es für mich wirklich nervig ist, aber es lohnt sich, weil es mir so viel Zeit spart. Also habe ich 5 Minuten damit verbracht, buchstäblich ein paar Elemente zu ändern. Wenn es ein bisschen komisch aussieht, überprüfe es einfach und es ist wahrscheinlich auf 126 eingestellt. Also ja, stell es einfach wieder auf Auto und es wird dir gut gehen. Okay, das sieht alles ziemlich gut aus für die Homepage, um ehrlich zu sein. Okay, großartig. Lassen Sie uns in diesem Fall damit beginnen, eine Art Blog-Seite zu erstellen, zum Beispiel eine Artikelseite. Fangen wir also an, eine Artikelseite zu erstellen. Also noch einmal, wir werden einfach die Navbar hinzufügen. Und auch hier wird sich diese NAV-Leiste später etwas ändern , also mach dir keine Sorgen Ich werde dir genau zeigen, wie das geht. Ähm, wir haben das Futter. Okay, fügen wir das einfach hinzu. Ich zeige Ihnen auch, wie Sie die Fußzeile verwenden , damit Sie eine universelle Fußzeile erstellen können Das wird dir so viel Zeit sparen. Es spart mir definitiv so viel Zeit, wenn Sie einen einzigen Abschnitt erstellen können , der letztendlich auf der gesamten Website gleich sein kann. Und wenn Sie es auf einer Seite ändern, ändert es sich auf jeder einzelnen Seite. Also werde ich dir etwas später zeigen , wie das geht. Aber das ist, ja, das wird dir so viel Zeit sparen. Okay. Lass uns eintauchen und das hier hinstellen. Ich stelle nur sicher, dass es mit dem Körper verbunden ist und nicht mit anderen Teilen, also drehe ich es einfach von rechts nach links. Okay. Da haben wir's. Das sollte gut sein. Fantastisch. Okay, das ist also etwas Gutes. Das gefällt mir. Das sieht ziemlich gut aus. Okay, fangen wir an, einfach, ähm, ein paar Dinge zu überprüfen, nur um sicherzugehen, dass alles an seinem Platz ist. Nun, was Artikel angeht, wir werden später in dieser Lektion ein CMS erstellen. Was ein CMS ist, ist im Grunde eine Möglichkeit, mehrere Seiten mit derselben Seitenstruktur zu erstellen . Also zum Beispiel Blogs, Artikel, sie eignen sich wirklich hervorragend dafür, ebenso wie Projekte. L, zum Beispiel, wenn Sie, Sie wissen schon, Logodesign verkaufen. Sie können eine Projektseite erstellen , auf der Sie einfach die eigentlichen Logos ändern, die Sie offensichtlich entworfen haben, den Text, einige andere Elemente wie den Titel, den Markennamen. Und was das CMS macht, ist, dass es im Grunde neue Seiten erstellt. Und ich werde dir später zeigen , wie das geht. Es ist super super einfach. Es erstellt im Grunde genommen sehr schnell einzigartige Seiten , ohne dass Sie sie manuell erstellen müssen , sodass Sie nur den Namen und die Logos ändern müssen, und es füllt automatisch alle Seiten aus, um Ihre Arbeit zu präsentieren Es ist super clever und wirklich, wirklich effizient. Es spart dir wirklich eine Menge Zeit. Möglicherweise sind Sie schon einmal mit der Verwendung von CMS vertraut. Wenn ja und das großartig ist, zeige ich Ihnen, wie das auf Webflow geht Wenn nicht, mach dir keine Sorgen. Es ist sehr einfach einzurichten und wird Ihnen in Zukunft eine Menge Zeit sparen. Dies ist nur ein Beispiel für eine Artikelvorlage, die ich für die Lancaster Academy verwende Aber ich habe jede Menge, ich verwende CMS für alles. Und alles, was Sie tun, ist einfach das benutzerdefinierte Feld zu nehmen. Also haben wir zum Beispiel die Artikel-Hauptseite, wir haben Themen, Themenfarbe. Du musst es nicht in dieser Tiefe machen, du musst nicht irgendwie, du weißt schon, so detailliert sein . Sie werden hauptsächlich den Text, die Textschaltfläche, den Rich-Text, das Bild und den Link und vielleicht ein Video verwenden den Rich-Text, das Bild . Viel mehr als das werden Sie nicht benötigen . Aber im Grunde genommen tun Sie das, sobald Sie die Felder im CMS-Bereich der Website erstellt haben. Dann können Sie es im Grunde verlinken. Also hier habe ich zum Beispiel das mit dem Thema verknüpft , sodass es in diesem Fall Branding ist. Das verbindet sich mit der Re-Zeit, unabhängig von der Re-Zeit im CMS, es wird sie hier sehen, das Hauptbild des Artikels, das hier ist, und so weiter und so fort. Es ist wirklich, wirklich großartig. Und hier, ich glaube, ich habe 47 verschiedene Artikel, und Sie können sehen, dass sie alle mit einem anderen benutzerdefinierten Feld verknüpft sind, und Sie können das so komplex oder so einfach angehen. Du musst nicht verrückt werden wie ich, aber weißt du, halte es einfach sehr einfach, aber wir werden das alles etwas später einrichten. Jetzt, in Margo, möchte ich das nur noch überprüfen. Das sind 126, wie ich schon sagte. Also muss ich sicherstellen, dass das geändert wird. Ich Mogo, ich glaube nicht, dass wir drei verschiedene Mitwirkende brauchen Also lass uns einfach aus einem aussteigen. Ich glaube nicht, dass wir dort die Buttons für soziale Medien brauchen. Du kannst sie dort behalten, wenn du willst, aber ich glaube nicht, dass sie viel nützen. Ändere das. Okay. Ich erzähle dir davon, lass uns anfangen, eine weitere Seite zu erstellen, und lass uns anfangen, deine Artikelseite insgesamt zu erstellen, denn das wird wirklich sehr hilfreich sein einfach all deine Artikel und alles , was du teilen möchtest, zu organisieren . Denn letztendlich möchten Sie als Agentur zeigen, dass Sie Fachwissen, wissen Sie, in verschiedenen Bereichen haben , oder? Das wird also sehr wichtig sein. Also einen Blog zu haben und dafür zu sorgen , dass du ihn wirklich professionell und minimalistisch präsentierst , dass du ihn . Es wird wirklich helfen, wissen Sie, einfach den Kunden für sich zu gewinnen und ihn dazu zu bringen, Ihnen zu vertrauen, das ist letztendlich das, was Sie wollen bevor er, Sie wissen schon, und das ist letztendlich das, was Sie wollen , bevor er, Sie wissen schon, einen Anruf bei Ihnen buchen oder Sie für Ihre Dienste beauftragen und Sie wissen schon, Ihnen letztendlich Geld geben. Okay. Das sieht gut aus. Gut. Okay. Wir können das alles ein bisschen nachher arrangieren, aber Sie können hier sehen, dass die Linkbox auf eins, 26 gesetzt ist. Es sieht einfach ein bisschen komisch aus, also lass uns das reparieren. Und ja, okay, das sieht gut aus. Damit bin ich zufrieden. Und wir können, wir können diese kleinen Dinge danach ändern. Insgesamt sehen wir hier ziemlich gut aus. Und Sie müssen es auch zu schätzen wissen, dass auch zu schätzen aufgrund dieser Bibliotheken wir aufgrund dieser Bibliotheken buchstäblich im Handumdrehen eine ganze Website erstellen. Ich meine, es ist buchstäblich erst 11 Minuten, 12 Minuten her, seit wir wirklich angefangen haben. Und wir haben jetzt buchstäblich schon drei oder vier Seiten erstellt . Und diese Seiten sehen gut aus. Diese Seiten sehen tatsächlich professionell aus. Und sie werden viel besser aussehen, wenn wir sie tatsächlich fertig haben und, du weißt schon, sie koloriert haben und all unsere anderen Sachen gemacht haben, tut mir leid. Okay. Lass uns die Kontakte-Seite machen Die Kontaktseiten sind im Allgemeinen recht einfach. Also fügen wir einfach das Navi und das Fudder hinzu. Und dann fügen wir den Abschnitt Kontakt du hinzu. Also wollen wir einfach etwas Nettes und Einfaches. Wir wollen nicht zu verrückt werden. Ich denke, das ist wahrscheinlich das Beste, wenn du ganz brutal ehrlich sein willst Okay. Schauen wir uns das an. Okay. Lass uns das hier hinzufügen. Okay. Perfekt. Also lass uns das erstellen und dann lass es uns noch einmal überprüfen. Okay. Gehen wir also zu 126 über, wie Sie sehen können. Und dann haben wir Okay, das ist alles da. Okay, perfekt. Perfekt. Perfekt. Okay, das sieht gut aus. Gehen wir nun zur Seite mit den Datenschutzbestimmungen über. nun die Datenschutzrichtlinien und rechtlichen Seiten anbelangt , so sind sie insgesamt alle ziemlich genau gleich aufgebaut. Sie sind jedoch wirklich einfach zu handhaben. Der einzige Unterschied besteht offensichtlich darin, dass der Inhalt tatsächlich auf der tatsächlichen Seite ist. Ich mache es also gerne so, dass ich hier nach einem Abschnitt gesucht habe, der fertig gebaut werden kann, aber ich denke, es ist tatsächlich einfacher, es einfach manuell zu machen. Also kann ich dir zeigen, wie das geht. Es ist genauso einfach, aber es muss nicht besonders hübsch aussehen, also musst du kein, du weißt schon, wirklich kompliziertes Design für eine Seite mit Datenschutzrichtlinien Um ehrlich zu sein, niemand wird es wirklich lesen. Es ist nur aus rechtlicher Sicht oder aus Sicht des Haftungsausschlusses da oder aus Sicht des Haftungsausschlusses Also werden wir es einfach manuell erstellen, glaube ich. Also werde ich dir zeigen, wie das geht. Okay, überprüfe. Stoßstange. Okay. Also haben wir dort gerade einen Abschnitt hinzugefügt, dann fügen wir einen Container hinzu und dann fügen wir einen Header hinzu. Dann fügen wir einen Absatz hinzu. Jetzt könnte es mit einem Absatz funktionieren. Ich bin mir nicht sicher, ob es mit einem Absatzabschnitt oder Rich-Text funktionieren wird . Wir werden sehen. Aber ja, wenn es mit einem Absatz nicht funktioniert, dann machen wir es im Grunde einfach danach mit Rich-Text. Es wird also kein großes Problem sein. Die Datenschutzrichtlinie kann also einfach über diese Website, free privacy policy.com und das Tolle an dieser speziellen Website erstellt free privacy policy.com und das Tolle an dieser speziellen Website Ich füge alle Links hinzu, damit du weißt, Datenschutzbestimmungen, Versand und Rückgabe, Allgemeine Geschäftsbedingungen, Cookies und all das Zeug Ich werde alles im Kurs verlinken , sodass du einfach darauf klicken und direkt zum eigentlichen Abschnitt gehen kannst. Webseite. Es tut uns leid. Nun, sie versuchen im Grunde, Ihnen eine wirklich professionelle Datenschutzrichtlinie in Rechnung zu stellen, wenn Sie wollen, was, ich meine, um ehrlich zu sein, ich meine, ich bin kein Anwalt, aber ich habe nie wirklich, Sie wissen schon, eine superprofessionelle verwendet , abgesehen von meiner Agentur, was ich natürlich mit meinem Anwalt gemacht habe. Aber, ähm, ja, du brauchst es nicht, um ganz ehrlich zu sein. Ich denke, wenn Sie gerade als Marke anfangen, klicken Sie einfach, ich will keine, wie eine professionelle Datenschutzrichtlinie, und Sie können sie einfach kostenlos bekommen. Also, ja, das würde ich wahrscheinlich vorschlagen. Hier müssen Sie nicht Ihre korrekte E-Mail-Adresse angeben. Also ja, ich habe nicht das Bedürfnis, das zu tun. Aber im Grunde können Sie jetzt entweder versuchen, das zu kopieren, aber auf manchen Computern ist das aus irgendeinem Grund nicht möglich. Sie könnten die Zwischenablage kopieren und das im Grunde fast wie eine Kodierung tun fast wie eine Kodierung Sie würden das also einfach in einen benutzerdefinierten Code kopieren , einen HTML-Code Wenn Sie nicht wissen, wie man programmiert, gibt es einen einfachen Weg, und ich kann Ihnen zeigen, wie das geht. Also, ich denke, der beste Weg ist, dass sie dir quasi eine E-Mail schicken. Lassen Sie mich einfach meine E-Mails überprüfen, damit ich versuchen kann , Ihnen zu zeigen, was Sie erhalten würden. Sie machen Hintern, lass das laden. Da haben wir's. Da schicken sie dir so etwas. Aber um ehrlich zu sein, führt Sie das normalerweise direkt zurück zur ursprünglichen Richtlinienseite. Was ich normalerweise mache, was normalerweise am besten funktioniert, ist es, es als Word-Dokument herunterzuladen. Und das können Sie tun, indem Sie einfach hier runtergehen, um Dateien zu generieren. Wenn Sie also Dateien generieren möchten, klicken Sie einfach. Normalerweise verwende ich die Doc-Datei , weil sie schon formatiert ist und so. Und wenn du dann darauf klickst und es öffnest, sollte es dir ermöglichen, es einfach zu kopieren und direkt in deine Website einzufügen Okay, lass uns das einfach zur Arbeit bringen. Okay, jetzt funktioniert es. Perfekt. Da haben wir's. Sie können hier also sehen, dass es bereits vollständig formatiert Es ist schon so ziemlich einsatzbereit. Versuchen wir also, es dem Absatzabschnitt hinzuzufügen und zu sehen, wie es aussieht. Okay, du kannst das Problem hier sehen, oder? Sie können sehen, dass das Problem darin besteht, dass es nicht formatiert wurde. Der Grund dafür ist, dass der einfache Absatzabschnitt nur für einen einzigen Textblock bestimmt ist nur für einen einzigen Textblock bestimmt Es ist nicht für einen formatierten Textblock gedacht. Was wir also tun müssen, ist, dies im Grunde gegen einen Rich-Text-Abschnitt auszutauschen , der viel nützlicher sein wird Okay, also lass uns das einfach machen. Also, du kannst hier dieses andere Format sehen, also kannst du es hier sehen. Ich habe gerade genau den gleichen Text kopiert und eingefügt, und wir könnten den Abstand zwischen einigen Abschnitten und so ändern den Abstand zwischen einigen Abschnitten und so Aber insgesamt sieht es toll aus, wie du weißt, es sieht professionell aus Es sieht gut formatiert aus. Wissen Sie, könnten wir den Abstand leicht ändern ? Ja, auf jeden Fall. Aber weißt du, alle Informationen sind da und es wurde auf die richtige Weise gemacht. Eine Sache, auf die ich achten würde, ist sicherzustellen, dass sie manchmal Dinge wie Informationen über Cookies auf der kostenlosen Website mit Datenschutzrichtlinien sehen . Sie werben also im Grunde nur für sich selbst im Rahmen der tatsächlichen Datenschutzrichtlinien. Sie können das hinauszögern, wenn Sie ein bisschen professioneller aussehen wollen ein bisschen professioneller aussehen wollen , denn dann wissen die Leute natürlich, dass Sie die Datenschutzrichtlinie von einer kostenlosen Datenschutzpolitik-Website bekommen haben , was nicht schlecht ist, aber die Leute schauen sich das vielleicht an und denken, vielleicht sind sie nicht so professionell, wie ich dachte. Mit der Seite „Über uns“ versuchen wir im Grunde, wissen Sie, den Leuten zu erzählen, was uns so besonders macht? Was macht uns anders und warum sollten Sie uns als Agentur wählen, richtig? Also, was wir jetzt tun werden, ist den Abschnitt Über uns aufzubauen. Jetzt haben wir die NAF-Bar, wir haben den Fuda, so wie wir es hätten tun sollen Und jetzt müssen wir endlich damit beginnen, unsere Markengeschichte, unsere Unternehmensgeschichte und das, was uns unterscheidet, zu erzählen unsere Unternehmensgeschichte und das, was uns unterscheidet, Was ich hier mache, ist, ich suche nur, ob ich ein Video hinzufügen möchte? Ich bin mir nicht sicher, ob ich tatsächlich ein Video hinzufügen möchte , um ganz ehrlich zu sein Möchte ich ein Video hinzufügen? Nun, das ist ein Leuchtkasten. Also, was eine Lightbox ist, ist, dass man einige Medien verstecken kann, also egal, ob es sich um ein Bild oder eine Auswahl von Bildern oder ein Video innerhalb der Lightbox handelt , sodass , wenn Leute auf das Bild oder die Lightbox klicken, das eigentliche Video erscheint, was, ähm, sehr hilfreich ist Ich bin mir allerdings nicht sicher, ob ich wirklich ein Video hören möchte . Das ist die Sache. Also könnte ich mich für etwas Einfacheres entscheiden , wie nur ein Bild oder so. Lass mich einfach sehen, ob ich dort etwas finde. Okay. Wie sah das aus? Wie sah das aus? Hier. Das sieht ziemlich gut aus. Ich will nur etwas , das ziemlich einfach ist. Ich will einfach etwas ganz Einfaches, aber ich bin mir einfach nicht sicher, was ich meine, das ist nicht so schlimm. Was ist mit dem? Ja, das können wir machen. Okay, großartig. Okay, lass uns das machen. Perfekt. Und dann kann ich die Bilder und so etwas später ändern. Das ist keine große Sache. Aber es hat alles , was ich brauche. Es hat einen Header. Es hat ein bisschen Text. Okay, perfekt. Schauen wir uns einige andere Abschnitte an , die wir auch darunter hinzufügen können, nur um die Dinge zu überprüfen. Okay. Auch hier versuchen wir mit der Über uns-Seite nur, den Leuten zu sagen , was wir tatsächlich für sie tun können. Das sind wir also, und das können wir für Sie tun. Ein bisschen wie die Homepage, aber die Homepage ist wie hier eine Landingpage, um Vertrauen aufzubauen. Im Bereich Über uns sind die Leute wirklich daran interessiert, was Sie tun müssen und wie Sie ihnen tatsächlich helfen können. Und dann fangen sie tatsächlich an, nach weiteren Informationen zu fragen, sodass Sie auf der Seite Über uns etwas technischer sein können, wenn nach weiteren Informationen zu fragen, sodass Sie auf der Seite Über uns etwas technischer sein können es darum geht, den Leuten zu sagen, welche Art von Dienstleistungen Sie ihnen anbieten können. Deshalb werden wir hier einen kleinen Abschnitt mit Dienstleistungen hinzufügen. Lass uns einfach etwas finden , das gut aussieht. Mm mm. Und insbesondere diese Bibliothek verwende ich für so viele verschiedene Websites. Sie können es für Agentur-Websites, persönliche Marken-Websites und E-Commerce-Websites verwenden persönliche Marken-Websites , und Sie können es so bearbeiten, dass es so aussieht, wie Sie es möchten. Ja, es ist super super nützlich, wirklich nützlich. Und eine tolle Sache , die ich liebe, eine About-Seite zu haben , ist , dass die Leute Fragen haben, die sie stellen können, richtig. Deshalb füge ich immer einen FAQ-Bereich hinzu, damit wir Fragen beantworten können. Über uns selbst in sehr kurzer Zeit und Raum auf der Website. Also ja, anstatt 20 verschiedene Abschnitte über, du weißt schon , verschiedene Fragen zu beantworten und das auf eine wirklich langatmige Art und Weise zu lesen verschiedene Fragen zu beantworten und , können wir einfach einen kleinen FAQ-Bereich haben , der im Grunde alle am häufigsten gestellten Fragen des Kunden hervorhebt am häufigsten gestellten Fragen des , sodass er dann einfach im Grunde einfach entscheiden kann , ob können wir einfach einen kleinen FAQ-Bereich haben , der im Grunde alle am häufigsten gestellten Fragen des Kunden hervorhebt, sodass er dann einfach im Grunde einfach entscheiden kann, ob wir sind das Richtige für sie oder nicht Nun, ich mag diesen kleinen Abschnitt am Ende des FAQ-Bereichs zu dieser speziellen Bibliothek , weil er quasi einen Aufruf zum Handeln enthält. Aber auch hier hatten sie, wie die Bilder dort , ein wenig Polsterung, also musste ich das ändern Und dann glaube ich, dass das aus irgendeinem Grund nicht richtig weitergeleitet wird Oh, entschuldigen Sie mich. Ja, es ist nicht richtig formatiert, also muss ich das Format ändern und die Fußzeile nach unten verschieben Ja. Okay, Sie können hier sehen , dass es ein kleines Problem gibt , weil sich der Abschnitt in einem anderen Abschnitt befindet, was offensichtlich ein Problem ist. Der Weg, dies zu beheben, besteht also darin, sie grundsätzlich zu trennen. Also werde ich das tun, indem ich einfach auf den Körper klicke. Ich stelle sicher, dass ich den Kumpel reinschreibe, du kannst hier sehen, dass die Polsterungen ein bisschen verschraubt Also werde ich diesen Abschnitt einfach noch einmal hinzufügen, weil ich, ich, wenn ich die Struktur der Website erstelle, sicherstellen möchte, dass die Struktur der Website perfekt ist , damit ich mich danach einfach auf das Design konzentrieren kann Design macht Spaß. Design ist der Teil, den ich am meisten liebe. Es ist einfach wirklich wichtig, zuerst die richtige Struktur zu finden, denn wenn Sie die Struktur nicht richtig hinbekommen, müssen Sie im Grunde wieder von vorne beginnen. Konzentrieren Sie sich also wirklich darauf. Also habe ich gerade die Navigatorleiste und werde einfach die Fußzeile nach unten hinzufügen Also lass uns das einfach so hinzufügen. Wir haben den Helden, wir haben Dienstleistungen, wir haben die FAQ, wir haben den Fuß am Boden. Perfekt. Das sieht gut aus. Und dann können wir darüber nachdenken , ich bin mir nicht sicher. Lassen Sie uns eigentlich einfach zwei hinzufügen. Fügen wir einfach zwei Dienste , damit wir nicht zu verrückt werden müssen. Sie können so viele hinzufügen, wie Sie möchten, aber lassen Sie uns nur zwei für die Hauptzeit hinzufügen. Okay, perfekt. Okay, schauen wir uns jetzt, du weißt schon, ein einzelnes Projekt an. Okay? Also, Sie wissen schon, welche Art von Service Sie anbieten, ob Logodesign, Fotografie, Sie wissen schon, Copywriting, was auch immer es ist, Sie benötigen eine einzige Projektseite, um die verschiedenen Kunden, mit denen Sie zusammengearbeitet haben, zu erklären und fast eine Fallstudie zu erstellen verschiedenen Kunden, mit denen Sie zusammengearbeitet haben Es ist also sehr wichtig, das richtig zu machen. Nun, was ich gerne verwende, ist, ich gerne einen sehr raffinierten Trick verwende , bei dem ich im Grunde eine Artikelvorlage für die Projektseite verwende, was wirklich, wirklich gut funktioniert, weil es einfach so funktionell ist Ich werde Ihnen gleich zeigen, was ich meine, aber ich habe die NAP-Leiste hinzugefügt, ich habe die Fußzeile Jetzt werden wir die Dinge einfach ein wenig aufräumen , weil diese spezielle Vorlage einfach super nützlich ist für, Sie wissen schon, eine Projektseite, und sie sieht einfach super professionell aus. Sobald sowieso alles fertig ist. Okay, also ändere das einfach als Schöpfer. Also, wer hat eigentlich an dem Projekt gearbeitet? Wir brauchen nichts davon, weil es keinen Artikel gibt. Also ändere das einfach. Okay, perfekt. Und was wir dann wahrscheinlich hinzufügen sollten, ist etwas Text. Also füge danach einen Absatz hinzu, nur um ein bisschen über das eigentliche Projekt zu schreiben. Wir haben also den Titel des eigentlichen Projekts. Okay. Perfekt. Das sieht nicht schlecht aus. Wir werden wahrscheinlich ein paar Änderungen vornehmen, nur um es auf den neuesten Stand zu bringen. Aber okay, lass uns ein Do hinzufügen. Lassen Sie uns ein Raster hinzufügen. Ich möchte also andere Bilder präsentieren, vor allem, wenn du Logodesign oder Fotografie machst , weißt du, du willst, dass es sehr bildlastig ist, oder? Du willst nicht, dass es einfach, du weißt schon , nur Text ist oder zu viel Text, sollte ich sagen Also ja, lass uns hier ein paar Bilder hinzufügen. Okay, wir haben also ein Rasterfeld hinzugefügt, wir haben einen D-Block hinzugefügt, und dann fügen wir diesem D-Block einfach ein Bild hinzu. Da haben wir's. Perfekt. Sie können hier sehen, dass es ein bisschen gepolstert ist, nehmen Sie das einfach weg. Dieser Standard läuft im Grunde bei jedem einzelnen Bild im Web, also müssen wir das einfach abnehmen Ich füge ihn einfach zu 100% hinzu. Diese Basis wird also den Div-Block vollständig füllen. Und dann werden wir einen Diblock kopieren und einfügen, sodass wir viele verschiedene Bilder haben Also nur y, lass uns vielleicht sechs drauflegen, was toll aussehen wird Und dann, lassen Sie uns y, wir müssen in der Lage sein, das eigentliche Projekt zu erklären . Also lasst uns versuchen, etwas zu finden. In der Tat, was werden wir hier tun. Wonach suche ich? Wonach suche ich? Lass uns, FQ-Bereich. Lass uns hinzufügen. Ich möchte den FQ-Bereich nicht als Ganzes haben. Ich will nur den Aufruf zum Handeln. Das ist das, was ich am meisten will. Also werde ich mir einfach den FAQ-Bereich holen, aber dann werde ich einfach den FQ-Bereich löschen und den eigentlichen Aufruf zum Handeln behalten Also ja, ich brauche nicht all diese Fragen. Ich lösche einfach all diese. Okay. Da haben wir's, nur um das zu nehmen. Und dann haben wir im Grunde den netten Aufruf zum Handeln ganz unten, der perfekt ist. Lassen Sie uns einfach die Polsterung reduzieren, damit sie nicht so groß ist Reduzieren Sie den Abstand auf dem Bild. Nimm einfach das Muster weg. Da haben wir's. Fantastisch. Fantastisch. Jetzt haben wir unten einen netten kleinen Aufruf zum Handeln , der perfekt ist. Da haben wir's. Reduzieren Sie das Muster ein wenig. Und das sieht ziemlich gut aus. Damit bin ich momentan ziemlich zufrieden. Das sieht ziemlich gut aus. Fantastisch. Reduzieren Sie das Muster ein wenig , nur um die Dinge zusammenzubringen, denn ich möchte, dass der Raum ungefähr gleich ist. Nimm das weg. Okay, das sieht super sauber aus. Ich liebe das. Fantastisch, großartig, großartig, großartig, großartig. Okay. Unglaublich. In Ordnung, schauen wir uns das an. Okay. Okay, jetzt werden wir die eigentliche Portfolio-Seite erstellen. Der Unterschied zwischen der einzelnen Projektseite und der Portfolio-Seite besteht also darin , dass die einzelne Seite ein einzelnes Projekt zeigt, die Portfolio-Seite alle Ihre Projekte zeigt, okay? Lassen Sie uns dafür eine Struktur aufbauen. Und wieder können wir ein bisschen schlau sein und diesen Abschnitt verwenden. Okay. Also wollen wir unser Team nicht präsentieren. Wir wollen natürlich nur die verschiedenen Arbeiten präsentieren , die wir geleistet haben. Ähm, also das ist wieder das Format 21, 26, damit wir das korrigieren können. Die sind alle repariert. Die haben einen kleinen Spielraum, also nimm den einfach ab. Okay, das sieht ziemlich gut aus. Also hier werden wir sie natürlich nicht verwenden, um unsere Teammitglieder zu präsentieren weil ich nicht sicher bin, ob Sie Teammitglieder haben, wenn ja, dann fantastisch Wenn Sie das nicht tun, ist das in Ordnung. Wir werden das im Grunde nutzen , um unsere Arbeit zu präsentieren. Lassen Sie uns also einfach ein paar davon löschen, damit wir etwas mehr Platz zum Arbeiten haben. Okay. Ja, ich denke, drei sind gut. Ja, tun wir das. Okay, das sieht gut aus. Perfekt. Nun schauen wir uns an, wie wir wissen können, was wir Leuten eigentlich verkaufen müssen, Sie wissen schon, wenn wir uns die Arbeit ansehen, die wir geleistet haben. Was wir also tun können, ist, uns einfach darauf zu konzentrieren, eines zu erstellen. Und sobald wir eines erstellt haben, so wie es uns gefällt, können wir es einfach duplizieren und es für mehrere verschiedene Projekte verwenden , an denen wir gearbeitet haben. Okay, hier haben wir zum Beispiel das einfach so geändert, dass wir zum Beispiel ein bisschen über das Projekt erzählen, sieh mal, okay. Okay, verzögere das. Ich versuche nur, das richtig aussehen zu lassen, weil es offensichtlich eine Portfolio-Seite ist, also möchte ich sichergehen, dass sie gut aussieht. Also können wir das duplizieren und mehrere verschiedene Versionen davon haben . Nun, das mag im Moment ein bisschen seltsam aussehen , aber haben Sie Geduld mit mir. Das ist noch in Arbeit, also arbeite ich das gerade mit dir durch. Auch hier möchte ich einen Aufruf zum Handeln, wie auf der einzelnen Projektseite, also werde ich den Abschnitt mit den häufig gestellten Fragen wieder zum Hauptteil hinzufügen Und dann werde ich es wieder bearbeiten, damit ich nicht all die verschiedenen Fragen und so haben muss. Verzögern Sie das. Verzögern Sie das. Los geht's. Perfekt. G super super super super. Lass uns das wegnehmen. Lasst uns das reduzieren. Okay, das sieht ein bisschen besser aus. Und wieder, ich weiß, dass ich das jetzt ein paar Mal erwähnt habe, aber wir konzentrieren uns hier nur auf die Struktur. Alles andere ist uns egal. Nur die tatsächliche Struktur. Lassen Sie uns das ein bisschen auf vier reduzieren. Okay. Das sieht ziemlich gut aus. Das sieht ziemlich gut aus. Wir haben die Struktur da. Jetzt haben wir also die Struktur und alles ist, weißt du, am richtigen Ort. Fangen wir an, die Website tatsächlich zu entwerfen, oder? 60. (Remastered Audio und 16: Fangen wir an, die Website tatsächlich zu entwerfen, oder? Also alle Strukturen auf allen Seiten. Fangen wir an, die Website zu entwerfen. Also hier wollen wir einige Bilder hinzufügen. Dies sind nur einige Bilder , die ich zusammengestellt habe, um den Arbeitsablauf ein bisschen zu beschleunigen damit ich ihn mit Ihnen viel schneller erledigen kann. Also werde ich einfach ein paar Bilder hinzufügen. Also lass uns das Logo ändern. Ich habe dieses Logo gerade online bei Google gefunden, kreativ in. Lass uns das einfach hier hinzufügen. Lass uns das löschen. Eigentlich diese kleine Ikone. Wir brauchen dieses Symbol nicht. Lösche das einfach. Perfekt. Da haben wir's. Das ist also alles da. Was Sie tun können, ist den Nav-Link zu nehmen und einfach das kleine **** zu drücken. Und stellen Sie das dann auf Home ein. Sie können also dasselbe in den Einstellungen tun, wo Sie einfach darauf klicken und eine Seite auswählen. Wenn also jemand auf Ihr Logo klickt, werden Sie ihn direkt zurück zur Startseite schicken. Das ist eine ziemlich häufige Sache. Und das bedeutet auch, dass wir auch in der NAF-Leiste den Home-Tab nicht wirklich benötigen Ändere dort einfach das Schnellbild. Lassen Sie uns diese Logos behalten , damit Kunden offensichtlich etwas Zeit sparen. Tun wir einfach so, als hätten wir mit Coin-Based, Webflow, Slack, Zoom usw. gearbeitet . Mit diesem kleinen Abschnitt hier. Also, was ich hier mache, ist die Bilder innerhalb der Symbole zu ändern. Und das geht so, dass Sie einfach ein Bild erstellen, auf Kopieren und Einfügen klicken, und dann haben Sie im Grunde ein Bild darin, das Sie ändern können. Sie können die Symbole nicht ändern. Sie müssen ein Bild hinzufügen und das Bild dann ein PNG-Format ändern. Hier habe ich zum Beispiel drei PNGs, einen Stern, hier ist , und dann finde ich einfach die richtige Größe, weil die Größe ein bisschen zu klein ist Ja, ich muss die Größe ein bisschen vergrößern. Ich lösche die gerade. Lass mich die Größe überprüfen. Diese Größe ist ein bisschen besser. Nochmals, also werde ich einfach kopieren und einfügen. Kopieren und einfügen. Da haben wir's, also habe ich das größere drin, und dann kann ich einfach das eigentliche Bild ändern. Ich habe die richtige Größe eingegeben. Ich werde einfach das PNG im Inneren ändern. Und ein PNG, falls Sie mit einem PNG nicht vertraut sind, PNG ist einfach ein Bild ohne Hintergrund. Es ist einfach transparent. Okay. Die tatsächlichen Bewertungen sehen also gut aus. Wenn wir diese nicht ändern müssen. Wir werden nicht viel Zeit damit verbringen, all die Texte und so zu ändern , denn das ist etwas, das Sie offensichtlich sehr einfach tun können. Es ist wie das Bearbeiten eines Word-Dokuments. Okay. Lassen Sie uns einige Bilder im Blog-Bereich ändern. Okay. Schauen wir uns das an. Perfekt. Das haben wir. Das sieht gut aus. Natürlich können wir die Blogtitel und so ändern, aber das ist dafür nicht notwendig. Das können Sie in Ihrer Freizeit tun. Ähm, ich möchte so respektvoll wie möglich mit deiner Zeit umgehen. Okay, also wir haben das, wir haben das. Okay. Wir ändern nur das Logo genauso wie zuvor. Auch hier können wir das mit der Startseite verbinden. Okay. Schauen wir uns nun die Social-Media-Symbole an. Also, sind wir in diesem speziellen Fall auf Facebook? Nein, sind wir auf Twitter? Nein. Roni auf Linked In in Instagram, also habe ich die gerade gelöscht Und lösche sie einfach, du klickst sie buchstäblich an und drückst einfach zu spät wie in einem Word-Dokument Super einfach. Okay. Lass uns aus irgendeinem Grund hierher gehen. Ich finde, das sieht ein bisschen komisch aus, aber eigentlich sieht es okay aus. Um ehrlich zu sein, sieht es nicht schlecht aus. Aber lassen Sie uns einfach damit weitermachen, das, ähm, das Ganze ein bisschen markengerechter aussehen zu lassen. Also gib einfach meine Marke an. Okay. Und ich denke, 2077 ist ziemlich weit weg, also lass uns einfach bis 2024 gehen Und dann, also ich meine, das sieht nicht schlecht aus, Wir haben die Bilder an Ort und Stelle. Weißt du, wir haben das Logo dort platziert. Im Moment sieht alles ziemlich gut aus. Ich denke, der nächste Schritt besteht darin, die Seite Über uns zu erstellen, weil die Seite Über uns und die eigentliche Homepage eigentlich ziemlich ähnlich sind, oder? Sie sind sich sehr ähnlich. Also, was wir tun werden, und ich habe die Struktur über uns geändert , weil mir das Bild in diesem bestimmten Abschnitt vorher nicht gefallen das Bild in diesem bestimmten Abschnitt vorher und es etwas schwieriger war, zu ändern, weil es mehrere Ebenen hatte. Also habe ich das einfach geändert, nur um dir den einfacheren Weg zu zeigen. Aber auch hier ändern wir nur das eigentliche Logo in der eigentlichen Fußzeile Nur um alles auf die Marke zu bringen. Und das ist der lustige Teil, genau da, wo man die Website durchgehen und, du weißt schon, die Farben ändern, die Bilder ändern, den Text ändern kann. Normalerweise ändere ich den Text zuletzt, damit ich, weißt du, irgendwie alles richtig aussehen lassen kann , und dann können wir uns im Grunde genommen wirklich die Zeit nehmen, um das Copyright zu bekommen. Ich werde wahrscheinlich später einen Copywriting-Kurs erstellen , aber das ist nur für die Zwischenzeit. Was nun die Navbar angeht, werden wir in Kürze diese universelle Navigationsleiste erstellen . Nun können Sie hier sehen, dass wir diese Navbar hier haben, die sich auf der Startseite befindet Jetzt brauchen wir diese Schaltfläche nicht, also können wir sie löschen. Wir müssen das nicht registrieren, also können wir es einfach auf das wichtigste Ziel, das strategische Ziel unserer Website, ändern wichtigste Ziel, das strategische Ziel , nämlich uns zu kontaktieren. Wir können das in ein schönes Rosa ändern. Okay, L ist karminrot, sollte ich sagen? Lassen Sie uns das auf Purpur ändern, nur damit es dem entspricht. Nun, das Rosa ist nicht dasselbe wie das Logo Pink. Also lass uns die Verbindung trennen. Also hole ich mir das Purpurrot wieder und trenne es. Und dann werde ich es leicht anpassen , bis es dem Logo entspricht Da haben wir's. Das ist ein bisschen besser. Okay, ich nehme die Gliederung weg. Aber okay, wenn ich mit der Maus drüber fahre, wird es lila. Das ist super nervig. Okay? Also lass uns zum Schweben gehen Gehen wir zum Farbbereich. Lass uns einfach das Purpur wählen. Okay, perfekt Und jetzt, wenn ich mit der Maus drüber fahre, wird es irgendwie dunkler rot Es wird also angezeigt, dass ich mich mit der eigentlichen Schaltfläche beschäftige, was genau das ist, was ich will Und das Tolle an diesen Vorlagen ist, dass , wenn Sie eine Sache ändern, alle Schaltflächen auf der gesamten Website geändert werden, sodass Sie es nicht mehrmals tun müssen. Also hier verbinde ich zum Beispiel einfach die Kontaktoren-Schaltfläche mit der Kontakte-Seite. Hier brauchen wir eigentlich kein Zuhause, also können wir das erwähnen, weil das Logo bereits nach Hause bringt Wir brauchen also keinen Home-Bereich. Hier können wir das auf etwas anderes wie Dienste ändern , zum Beispiel. Und das kann einfach auf unsere Seite Über uns gehen oder so. Und wenn wir mit der Maus drüber fahren, können wir es so ändern, dass es tatsächlich rosa wird, was auf der Marke aussieht, los geht's. Das sieht ziemlich cool Nun, der Grund dafür, dass es nicht dasselbe für Ressourcen tut, aber den gleichen Effekt für die Preisgestaltung hat, ist, dass Ressourcen ein Drop-down-Menü sind. Es ist ein Drop-down-Element, wohingegen die Dienste und Preise ein Tab-Element sind, okay? Also, weißt du, du kannst genau das Gleiche tun, aber nur um zu erklären, warum das passiert ist Okay, also wir haben dort die NaF-Bar. Jetzt werden wir eine neue Komponente erstellen Was ist also eine neue Komponente? Wenn wir also eine Komponente namens Agency NAV Bar erstellen, können wir diese Komponente jederzeit auf der gesamten Website verwenden . Damit du sehen kannst, wie grün es ist. Wir können diese Komponente jetzt nehmen und sie auf jeder einzelnen Seite der gesamten Website verwenden . Und wenn wir etwas ändern, also zum Beispiel vielleicht eine weitere Seite zur NAV-Leiste hinzufügen. Sobald wir es dort auf der ersten Seite ändern, wird es sich auf der gesamten Website ändern, was genau das ist, was wir wollen. Es wird uns so viel Zeit sparen, so viel Zeit. Wir können es also für Tonnen verschiedener Dinge verwenden, und wir werden es später etwas mehr für das Futter verwenden, was am wichtigsten Und dann ja, ich wollte dir nur zeigen wie du die Website nicht nur schnell erstellen kannst, sondern auch, wie du Dinge so einrichtest , dass du deine Website auch sehr schnell verwalten kannst, denn das wird ein sehr wichtiges, superwichtiges Element sein superwichtiges Element weil deine Zeit super wertvoll ist, oder? Sie möchten also sicherstellen , dass die Website so eingerichtet ist , dass sie Ihnen das Leben so einfach wie möglich macht. Und das ist einer der Gründe, warum ich Web Flow liebe. Deshalb investiere ich in das Webflow CMS-System, weil das CMS-System Ihnen einfach so viel Zeit spart Und Zeit ist sehr wertvoll, und es ist sehr wichtig, dass Sie, wissen Sie, keine Zeit verschwenden Also okay, lass uns zur Seite mit den Blog-Blog-Artikeln gehen. Es führt uns tatsächlich zur Kontaktseite. Lass uns das zuerst machen. Also hier kannst du natürlich deine E-Mail-Adresse hinzufügen, du kannst deine Daten hinzufügen und so. Ich möchte nur die tatsächliche Farbe in Rosa ändern, offensichtlich ist es im Moment lila und es sieht nicht sehr gut Und wenn du auf den kleinen lila Button hier oben klickst, kommst du einfach zu vielen verschiedenen Farben, du kannst zum Beispiel Farben speichern, was super cool ist Also, es ist nur so, dass ich das speichere. Ich wähle einfach dasselbe Rosa. Es erspart Ihnen also, immer wieder dieselbe Farbe zu finden oder immer wieder denselben Hex-Code hinzuzufügen. Super super schlau. Okay. Okay, jetzt können wir ganz offensichtlich unseren universellen NaF-Riegel hinzufügen, weil der andere der andere war der alte Also fügen wir das einfach dort hinzu. Sie können sehen, wie schnell und einfach es ist, eine wirklich markenähnliche Kontaktseite zu erstellen Wir haben buchstäblich etwa 5 Minuten gebraucht . Es ist nicht schwer. Es ist wirklich, wirklich einfach. Okay. Schauen wir uns das an. Okay. Da haben wir's. Perfekt. Okay. Also, das sieht ziemlich gut aus. Okay. Gehen wir zur einzelnen Projektseite über. Deshalb können wir anfangen, die Dinge richtig, richtig gut aussehen zu lassen. Und die Projektseite ist wirklich wichtig für jede Agentur oder jeden Dienstleister, weil Sie einfach, wissen Sie, es ist nicht so sehr eine Projektseite, sondern es ist wie eine Fallstudienseite, oder? Ich verwende nur eine Projektseite für diesen speziellen Umstand Es ist wirklich wichtig, dass Sie Ihre Arbeit im besten Licht präsentieren , denn das wird Sie dazu bringen, eingestellt zu werden, okay? Also, lass uns einfach das Futter austauschen. Also ja, wenn Sie sicherstellen, dass Sie gerne Zeit investieren und Ihre Arbeit wirklich richtig präsentieren und richtig machen , spart Ihnen viel Zeit und später viel Zeit und Energie bei der Gewinnung neuer Kunden Grundsätzlich gilt: Je besser Ihre Website aussieht, desto einfacher wird es für Sie sein, Kunden zu gewinnen. Wir haben unsere Website derzeit an einem wirklich guten Ort und wir haben sie in den letzten zehn Jahren verfeinert. Und jetzt informiert Sie unsere Website über 30-25 Leads pro Tag oder gibt uns, Sie wissen schon , und wir lehnen die meisten dieser Leads weil wir nicht mit diesen bestimmten Unternehmen zusammenarbeiten wollen diesen bestimmten Unternehmen Es zeigt also nur, wie wichtig es ist , schöne Bilder zu bekommen und Ihre Arbeit auf die richtige Weise zu präsentieren Also werde ich hier einfach ein paar Bilder hinzufügen nur für Platzhalter Aber eine Sache, die ich auch sagen würde, und das habe ich in anderen Kursen und auch zu Beginn dieses Kurses erwähnt , ist, sicherzustellen, dass Sie innerhalb der von Ihnen angebotenen Dienstleistungen die Besten in Ihrer Branche heraussuchen innerhalb der von Ihnen angebotenen Dienstleistungen die Besten in Ihrer Branche heraussuchen Und lerne von ihnen, lerne, was sie tun, wie sie ihre Arbeit präsentieren, und mache es dann auf sehr ähnliche Weise , denn dann wirst du, du weißt schon, deine Dienstleistungen viel einfacher verkaufen können . Weil, weißt du, sie sind die Besten von dem, was sie tun. Es gibt also einen Grund, warum sie so gut sind und warum sie Ihnen ein Vermögen verlangen können, wie Pentagram zum Beispiel, eine Markendesign-Firma, die Niederlassungen auf der ganzen Welt hat Sie verlangen Hunderttausende, wenn nicht sogar 50.000, 50.000 bis 100.000 pro Projekt zur Entwicklung der Markenidentität Lassen Sie uns also einige Texte hinzufügen, denn das wird wichtig sein, um zu erklären, was wir im Rahmen des Projekts tatsächlich tun. Ich werde den Text nicht wirklich hinzufügen, weil das natürlich nur Zeit verschwendet, aber Sie können sich natürlich Zeit nehmen, um eine nette kleine Projektrezension zu schreiben . Okay. Lass uns ein bisschen hinzufügen, dass du mit uns arbeiten möchtest. Ja. Lass uns das dort hinzufügen. Und dann verlinken Sie das einfach mit der Kontaktseite. Damit die Leute mit uns in Kontakt treten können. Was großartig ist. Okay, das sieht ziemlich gut aus. Sie können sehen, dass wir nicht viel Zeit damit verbracht haben, diese Website zu erstellen. Wir bauen buchstäblich die Website. Und ich glaube, es sind etwa, du weißt schon, 40, 46 oder 47 Minuten. Wir haben die Website erstellt. Und es ist ernsthaft nicht schwer. Aber der Grund, warum wir das so schnell machen konnten, ist, wissen Sie, ich hatte alle Bilder vorbereitet und schreibe den Text natürlich nicht. Aber ungefähr 90% der Arbeit, die tatsächlich mit dem Aufbau der Website verbunden ist. kannst du erledigen. Und dann sind es nur die 10%, die Sie sich wirklich Zeit nehmen müssen. Und ich würde dir wirklich empfehlen Zeit zu nehmen, weißt du, die Feinheiten, wie du deine Arbeit präsentierst, wie du den Text schreibst, all diese Dinge sind wirklich wichtig. Okay. Lass uns einfach den NaF-Riegel und das Futter wechseln. Perfekt. Und sobald Sie mit Webflow vertraut und anfangen, Sie wissen schon, mehr Dinge hinzuzufügen und mehr Dinge herauszufinden. Ihre Website wird einfach immer besser und besser. Und was die Website anbelangt, möchte ich sagen, dass ich hier eine Software zur Verhaltensverfolgung hinzufüge, mit was die Website anbelangt, möchte ich sagen, dass ich hier eine Software zur Verhaltensverfolgung hinzufüge der Sie tatsächlich wie mit der Maus sehen können . Okay, also was ich hier machen werde, um für eine Sekunde innezuhalten. Ich werde den CTA, den Call to Action, auf der anderen Seite hinzufügen den Call to Action, auf der anderen Seite Auf eine viel einfachere Art und Weise. Also ich habe das. Ich habe den eigentlichen Abschnitt ausgewählt. Ich werde eine Komponente erstellen. Denken Sie an das Gleiche wie die Navbar und das Futter. Und ich werde eine Sitzung oder einen Abschnitt für Ermittlungsgespräche erstellen , in dem wir das im Grunde zu verschiedenen Abschnitten hinzufügen können, und alles wird an derselben Stelle für den Abschnitt „Discovery Da haben wir's. Hauptstadt D. Perfekt. Erschaffen. Okay. Jetzt kannst du sehen, dass es grün ist. Das bedeutet, dass es auf der gesamten Website genau dasselbe sein wird. Lassen Sie uns das also auch zum Portfolio-Bereich hinzufügen. Weil ich diesen momentan den blauen behalten könnte. Aber die Realität ist, ich werde später mehr Arbeit für mich haben, weil ich zwei verschiedene Abschnitte bearbeiten muss, wo ich stattdessen, wenn ich die Arbeit jetzt mache, diesen löschen kann. Und dann kann ich einfach den anderen Bereich für Discovery-Anrufe hinzufügen , der universell ist, sodass er sich leicht auf der gesamten Website ändert und ich dieselbe Arbeit nicht zweimal machen muss, was, wissen Sie, wirklich wichtig ist. Okay. Schauen wir uns das an. Okay. Das ist alles gut. Das ist alles gut. Das ist alles gut. Fangen wir an hinzuzufügen, dann werden wir anfangen, etwas B, B, Bum , Bum hinzuzufügen Oh ja, was ich vorhin gesagt habe, bezieht sich Hinzufügen von Verhaltens-Tracking-Software , um Ihre Website zu verbessern Also, jeden Monat, nachdem Sie Ihre Website erstellt haben und sie live ist, werden Sie anfangen, Kunden zu gewinnen. Okay? Ich werde nur ein paar Bilder hinzufügen, während ich mit dir darüber spreche , weil es wirklich wichtig ist. Wenn Sie anfangen, die Besucher Ihrer Website jeden Monat zu verfolgen , oder? Also nur an einem Tag im Monat, am Ende des Monats, schauen Sie sich wahrscheinlich nur Aufzeichnungen an und ich kann Ihnen zeigen, wie Sie die Hot Jar-Software installieren . Ich habe sogar einen Link, . Ich habe sogar einen Link Sie sie kostenlos bekommen können Im Grunde genommen ist sie diesem Kurs beigefügt. Wenn Sie so etwas wie Hot Jar auf die Website anwenden, zeigt es Ihnen, wie sich Ihre Besucher auf Ihrer Website verhalten , und dann können Sie im Grunde Änderungen vornehmen, die auf dem tatsächlichen Verhalten Ihrer Website-Besucher basieren die auf dem tatsächlichen Verhalten . Anstatt also nur zu raten und die Website einfach zu ändern , weil Sie denken, dass sie gut aussieht oder was auch immer, können Sie es aus den richtigen Gründen auf die richtige Art und Weise tun Gründen auf die richtige Art und Weise , um die gewünschten Ergebnisse zu erzielen Und es gibt einen riesigen Unterschied. Weißt du, jemand, der nur die Website ändert , weil sie besser aussieht. Sie haben keine Ahnung, was sie tun. Sie werden sich im Kreis drehen, weil sie ihre Entscheidungen nicht auf der Grundlage dessen treffen, was tatsächlich passiert Sie treffen Entscheidungen nur auf der Grundlage dessen, was ihrer Meinung nach passiert, was, weißt du, ziemlich dämlich ist, oder? Also, was ich hier mache, ist , ich werde einfach eine Art Foto erstellen, wie eine Fotografie-Website hier. Das wird also ein Fotostudio sein. Und dann können wir das ändern. Also nochmal, weißt du, wir können an den Texten herumspielen und so, aber insgesamt sieht das ziemlich gut Also, schauen wir uns das mal ein bisschen an. Also, was ich tun möchte, ich fange an, irgendeine Art von Animation oder irgendeinen coolen coolen Effekt zu kreieren oder irgendeinen coolen coolen Effekt wenn jemand drüber fährt Denn im Moment, wenn wir mit der Maus drüber fahren, passiert wirklich nichts Es sieht einfach irgendwie hübsch aus, ziemlich langweilig, um ehrlich zu sein Ich mag okay nicht, also wenn ich jetzt mit der Maus drüber fahre, ändert sich die Kapazität Okay, das ist gut. Also haben wir das. Okay, perfekt. Okay, lass uns das machen Lass uns etwas anderes machen. Lass uns etwas anderes machen, das ziemlich cool ist. Lass uns das ändern. Vielleicht können wir es hinzufügen, vielleicht können wir es etwas größer machen , wenn die Leute darauf klicken oder den Mauszeiger drüber bewegen Nicht um viel, nur um vielleicht ein winziges bisschen Schauen wir uns an, wie groß es ist. Okay. Es macht es nicht viel größer, also machen wir es ein bisschen größer. Okay. Und dann lass uns vielleicht hinzufügen. Was können wir noch tun? Was können wir noch tun? Was können wir noch tun? Ich will es nicht zu verrückt machen. Lass uns vielleicht so etwas wie einen Filter oder so hinzufügen. Lass uns einen Filter hinzufügen? Ja, lassen Sie uns einen Filter hinzufügen. Lass uns etwas Unschärfe hinzufügen Fügen wir hinzu, dass wir solche Dinge nicht tun wollen. Solche Dinge werden ein bisschen zu intensiv. Lass uns eine Unschärfe hinzufügen. Und wir wollen es nicht zu verschwommen hinzufügen, sondern nur ein bisschen, nur um es interessant zu machen Okay. Also jetzt, wenn du mit der Maus drüber fährst, ähm, das Bild Es sollte im Grunde verschwommen aussehen. Gehen Sie einfach vorher zu den Übergängen und dann zu allen Eigenschaften, und dann holen Sie es sich buchstäblich für etwa 375, und lockern Sie das dann einfach ein bisschen eleganter ab, also verbessern Sie sie einfach Und dann klickst du das ab und das wird automatisch gespeichert Und jetzt, wenn wir mit der Maus drüber fahren, können Sie sehen, dass es irgendwie diesen coolen glasigen Effekt hat , der , wie Sie wissen, viel besser aussieht Okay. Jetzt wissen wir, dass sie es tatsächlich wissen, es ist quasi ein künstlerischer Effekt, oder? Und du kannst damit machen , was du willst. dauert wirklich einige Zeit, damit herumzuspielen denn das ist, weißt du, es ist einer meiner Lieblingsteile des Website-Designs, einfach kleine Animationen und coole Bilder wie diese hinzuzufügen coole Bilder wie diese Ich werde einen Zeiger hinzufügen , damit die Leute, wenn sie tatsächlich mit der Maus darüber fahren, sich von einer Maus in eine Hand verwandelt , nur damit sie wissen, dass sie anklickbar ist Ähm ja, abgesehen davon. Ich finde, das sieht ziemlich gut aus. Das sieht eigentlich viel besser aus als ich erwartet hatte. Okay. Schauen wir uns das vielleicht an, weil das momentan nicht wirklich anklickbar Das ist nur ein Bild, was natürlich ein Problem darstellt, denn wenn die Leute es nicht anklicken können, können sie nicht zur Projektseite gehen, also müssen wir einen Link-Block hinzufügen Also werden wir hier einen Link-Block hinzufügen. Dies könnte zu einem kleinen Problem führen. Also werden wir das zusammen durcharbeiten. Nur damit ich dir genau zeigen kann wie du es angehen solltest. Okay. Also haben wir das. Ich habe es kopiert und eingefügt. Okay, das ist offensichtlich viel zu klein. Wir werden dieses Auto machen. Okay. Jetzt ist es so, als ob es unterstrichen ist, was nicht sehr sauber aussieht, oder? Also hier können wir die Seite hinzufügen , zu der wir gehen wollten Aber mir gefällt nicht, wie es unterstrichen ist . Okay, lass uns das anklicken Lassen Sie uns die Linien darunter loswerden. Okay. Also lass uns einfach den Artikel auswählen. Dann der Link-Block und dann einfach darauf klicken und dann darauf klicken, und dann sind wir fertig. Da haben wir's. Okay, auch. Also, jetzt ist alles, alles sollte startklar sein. Nun, was das CMS angeht, hier können die Dinge ein bisschen interessanter werden. 61. (Remastered Audio und 16: Okay, bei CMS-Abschnitten möchte ich Ihnen nur zeigen, wie Sie einen einrichten. Und Sie können CMS-Abschnitte für buchstäblich alles verwenden. Sie können es für Ihre Artikel verwenden, Sie können es für Projektseiten verwenden, Sie können es für Produkte verwenden wenn Sie auf der E-Commerce-Website sind. Aber für dieses Beispiel können wir buchstäblich einfach, du weißt schon, eine Sammlung für unsere Portfolio-Beispiele erstellen , oder? Also, weißt du, wir fügen die Hauptbilder hinzu, die Art der Arbeit, du weißt schon, die Art des Projekts. Wir können natürlich hinzufügen, dass wir den obigen Namen im Klartext haben. Die Piste, das sind, Sie wissen schon, Basisinformationen, die brauchen wir, den Blurb Taser-Text Das wird den Leuten also ein bisschen darüber erzählen , weißt du, was sie erwarten können Und wenn wir es dann tatsächlich erstellen, können wir einfach fünf Elemente hinzufügen. Das sind nur Platzhalter, also müssen wir sie natürlich nicht verwenden, aber es wird Ihnen nur zeigen, wie Sie sie tatsächlich hinzufügen Okay. Also, wenn wir hier zur Seite P 40 gehen, anstatt Links zu erstellen und alles manuell zu machen. Wir können tatsächlich etwas ziemlich Cooles machen, wo wir das einfach ohne Probleme erstellen können, oder? Also fügen wir einfach die NaF-Leiste hinzu. Fügen wir diesen Abschnitt hinzu, also kopiere ich ihn einfach und füge diesen Abschnitt hier unten Ich habe den Aufruf zum Handeln erhalten. Und wir werden auch einfach die Fußzeile hinzufügen. Und dann kannst du hier sehen , dass das nicht mit dem Körper verbunden ist, aber es ist jetzt, aber es war nicht Gehen wir zur Fußzeile. Okay. Also, wir haben diese Seite wieder, aber wir haben sie tatsächlich erstellt, wie Sie in der oberen linken Ecke sehen können . Es ist jetzt eine lila Kiste. Das bedeutet, dass es sich im CMS-Bereich befindet. Es ist keine statische Seite, sie befindet sich im CMS-Bereich. Ich kann also im Grunde anfangen, mir das anzusehen. Ich frage mich, ob das vielleicht der beste Weg ist, das zu tun. Ba, ba, ba, ba. Okay. Lass uns einen Conta erstellen, einen separaten Conta Dann reduzieren wir einfach den Rand an der Seite auf etwa 30. Ungefähr. Ich denke, 30 sollten gut sein. Keine. Also das ist voll. Okay, Sie können sehen, wie es den gesamten Bildschirm ausgefüllt hat, was gut ist. Und dann können wir mit den Rändern und so herumspielen und all diese Dinge machen. Aber lassen Sie uns einfach den CMS-Block zu diesem C hinzufügen, siehe hier. Es wird die Sammlungsliste genannt. Also werfen wir es einfach da rein, was großartig ist. Doppelklicken Sie dann und wählen Sie die Quelle aus, sich in diesem Fall um Portfolio-Beispiele handelt. Und dann können Sie hier sehen, dass es den fünf Artikeln um Platzhalterelemente handelt , die wir zuvor hatten Wenn Sie jetzt zur Sammlungsliste gehen und auf das Raster klicken, werden die Dinge im Grunde aufgeteilt, sodass Sie sie nett und professionell aussehen lassen können Es ist so ziemlich genau das Gleiche wie das, was wir unten haben. Jetzt können Sie diesen Artikel einfach kopieren auf den Link-Block klicken. Kopieren Sie dies und fügen Sie es in das obige Feld ein. Jetzt hast du das, weißt du, sieht sehr, sehr, du weißt schon, naja , es sieht eigentlich nicht sehr gut aus. Okay, wie können wir das reparieren? Weil ich sichergehen will, dass wir das gemeinsam reparieren können. Okay, Hauptbild, lassen Sie uns es einfach mit dem Bild verbinden und dann sehen, was passiert. Okay, das hat auch nicht funktioniert. Lassen Sie uns jetzt einfach die eigentlichen Daten verbinden und dann sehen, was passiert. Wir stellen also nur eine Verbindung zu den verschiedenen Elementen her, zum Beispiel der Art der Arbeit. H, k. Ah, das ist der Grund, warum es nicht funktioniert hat, weil die tatsächliche Menge an Menge Inhalt nicht ausreichte, um den gesamten Raum auszufüllen. Ah, ok, okay, okay. Und jetzt macht das Sinn. Okay, jetzt haben wir es dann. Jetzt haben wir es. Jetzt müssen wir nur noch das CMS im Backend ändern. Okay, perfekt. Es gab also eigentlich kein Problem mit der Vorlage. Wenn wir den Inhalt also von Anfang an hinzugefügt hätten, hätten wir kein Problem gehabt. Der Grund, warum wir ein Problem hatten, ist , dass wir im Grunde genommen , weißt du, den Inhalt nicht drin hatten. Okay. Also was wir jetzt tun können, ist, dass wir das einfach löschen oder loswerden können , weil wir nicht beides brauchen, okay. Und dann können wir einige Elemente zum eigentlichen CMS-Backend hinzufügen , das sich auf all diese Elemente bezieht. Die eigentlichen Bilder und der Text werden also aus den Portfolio-Beispielen in der CMS-Sammlung gezogen aus den Portfolio-Beispielen in der CMS-Sammlung Also lasst uns diese beiden löschen. Und lassen Sie uns drei Projekte hinzufügen , nur um Ihnen zu zeigen, wie das funktioniert. Es ist wirklich einfach und leicht, also folgen Sie einfach. Okay, lass uns eines davon ersetzen. Okay. Nennen wir diese Pflanze einfach. Und dann bevölkert sich das Slogle in der Regel von selbst, aber in diesem Fall ändern wir natürlich einfach die Art der Arbeit Das ist also die eigentliche Art von Werken oder Fotografie. Okay. Und dann der Klappentext oder der Teaser-Text Hier geht es nur ein bisschen um das eigentliche Projekt und darum , was Sie erwartet, wenn Sie tatsächlich darauf klicken Okay. Okay, auch. Lass uns gehen. Sobald wir damit fertig sind, können wir, dass das eigentliche Element auf der Portfolio-Seite bereits gefüllt ist. Es wurde also bereits für uns bearbeitet. Wir müssen nichts weiter tun, weshalb ich die CMS-Systeme und die Sammlungen und deren Verwendung so liebe und die Sammlungen und deren Verwendung so , weil sie so viel Zeit sparen. Ähm, also nochmal, ich werde das einfach auf Kopf ändern. Lass uns das einfach auf Fotografie umstellen. Ändern wir das in Ich liebe meinen Kopf. Da haben wir's. Sif. Und beim letzten machen wir, wir machen es einfach, ich weiß nicht Lass uns das einfach auswählen . Los geht's, und dann machen wir einfach etwas anderes, das damit zusammenhängt. Und natürlich dauert es, wie bei den CMS-Sammlungen, ein wenig, bis man sich daran gewöhnt hat, sie zu verwenden. Aber ehrlich gesagt, sobald du dich daran gewöhnt hast, sie zu benutzen, wirst du es quasi zu den Dingen gehören, bei denen ich möchte, dass du es lernst. Du bist so froh, dass du es getan hast, und du wünschst dir nur, du hättest früher gelernt, wie man es benutzt. also Ihre Website auf diese Weise erstellen, sparen Sie so viel Zeit. Okay, da sind also die drei Punkte. Wenn wir jetzt zur Portfolio-Seite zurückkehren, können Sie sehen, dass sie bearbeitet wurde, und aber ja, aus irgendeinem Grund ist diese immer noch ein bisschen nervig. Okay. Also das ist es , was passiert. Okay? Es bereitet uns immer noch ein kleines Problem. Also, was muss es noch geben? Es muss noch etwas anderes geben , das ein Problem verursacht. Lassen Sie uns das Problem lösen und es lösen. Okay. Lass uns zum Dif-Block gehen Der Diff-Block wird ihn also am meisten formatieren Ah, k. Diese Lücke, okay. Hm. Manchmal geht es nur darum Dingen herumzufummeln und dann wieder auf sich selbst zurückzukommen , um die Dinge herauszufinden Optionen, passendes Cover. Mmm, maximale Breite. Das ist es nicht. Okay. Es gibt definitiv etwas , das dazu führt das nicht perfekt aussieht. Ich muss nur herausfinden, was es ist. Mm. Okay. Ein Block. G di-Block. Es wird nur ein paar Minuten dauern , um das richtig zu machen. Gegenstand der Sammlung. Okay. Gegenstand der Sammlung. Ich denke, es ist definitiv der Sammlungsgegenstand oder der Div-Block. Es ist einer von denen. Oder vielleicht ist es, vielleicht ist es tatsächlich das Bild. Schauen wir uns das an. Okay, lass uns einfach spielen. Okay. Ah. Okay. Mmm. Ich dachte , das wäre es vielleicht gewesen, aber nichts. Okay. Lass uns das versuchen. Ich fummele gerade herum und versuche herauszufinden, wie das Lass uns das einfach komplett vermasseln. Lass uns das zurücknehmen. Lass uns das zurücklegen. Und klicken Sie einfach, Befehl Z, Befehl Z, um das wieder dahin zu bringen, wo wir es haben wollten. Bild-Wrapper Ah, vielleicht ist es der Image Wrapper. Vielleicht ist es der Image Wrapper. Das habe ich vorher nicht gesehen. Vielleicht ist es das dann nicht. Vielleicht ist es das. Okay. Om Block. Nein, das ist es nicht. Flex. Linkblock. Also arbeite ich gerade die Optionen durch. Im Moment arbeite ich nur die Optionen durch und versuche herauszufinden, was es sein könnte. Und wenn du das kannst , dann kannst du anfangen, die Unterschiede zu sehen, okay. Ah, da haben wir's. Also lass uns einfach zurückgehen und schauen, wie das behoben wurde. Also haben wir den Lock Flex. Zu. Flexblock. Gehe zum Dif-Block Also können wir einfach zum Diff-Block gehen. Lass uns zum Dif-Block gehen. Klicken Sie auf den rechten Mittelblock Da haben wir's. Also im Grunde wurde der Diff-Block auf Flex statt auf Block gesetzt, und er wurde buchstäblich sofort repariert , das sieht also toll aus Okay, perfekt. Das ist jetzt behoben. Ich denke, der letzte Schritt besteht darin, einfach damit zu beginnen, die Dinge abzuschließen und sie zu beenden Und dann können wir und dann können wir anfangen, die Party richtig in Gang zu bringen. Das kannst du hier sehen. Okay. Schauen wir uns also dieses kleine Drop-down-Menü hier unten an. Ich setze diesen Schuss. kannst du hier also sehen. Es sieht nicht sehr gut aus. Nun, wenn Sie sich an das von vorhin erinnern, haben wir die Breite auf eins, zwei, sechs gesetzt. Wenn wir das also ändern , wird das alles ändern und es wird 1 Million Mal besser aussehen. Fantastisch. Okay? Und wieder können wir das verwenden, um auf verschiedene Dinge zu verlinken, et cetera, et cetera Aber natürlich haben wir Ihnen bereits gezeigt, wie das geht, damit wir das nicht noch einmal durchmachen müssen Okay. Jetzt haben wir im Grunde eine Situation, in der die Website so gut wie fertig ist. Wissen Sie, es ist offensichtlich eine sehr einfache Website. Es ist nicht allzu verrückt, aber Sie werden offensichtlich viel mehr Zeit damit verbringen. Du wirst alles durchmachen. Brauchen wir dieses kleine Element wirklich oder nicht? Brauchen wir das? Vielleicht können wir einfach, äh, die Farbe ändern, wenn wir wollen. Wir können die Farbe ändern oder wir können sie einfach löschen. Es liegt ganz bei dir. Okay. Da haben wir's. Ich ändere nur die tatsächliche Farbe des Abschnitts. Und dann können wir und dann können wir im Grunde zu den Einstellungen übergehen. Okay, lass uns einfach die Verbindung trennen. Lass uns das rüberbringen. Perfekt. Fantastisch, großartig, großartig. Da haben wir's. Okay. Also haben wir das. Das sieht gut aus. Das sieht gut aus. Hängt bis zu Rosa ab. Änderungen an unserem Purpur, tut mir leid, nochmal, Purpur. Versteh das immer falsch. Purpurrot, karminrot Da haben wir's. Okay. Okay, okay. Also alles andere sieht gut aus. Natürlich können wir alle Buttons und so miteinander verknüpfen , aber es ist so, du klickst einfach drauf und klickst auf das kleine Zahnrad und dann kannst du einfach die Schaltfläche oder Seite auswählen , zu der du gehen möchtest Alles andere sieht ziemlich gut aus. Das hier. Natürlich können Sie den Text ändern, die Farben ändern. Sie können tatsächlich auch einen CMS-Bereich für diesen Abschnitt erstellen, wenn Sie möchten. Ich benutze ihn manchmal, wenn ich mehr als drei Artikel habe. Aber normalerweise mache ich das hier, da ich hier einfach die beliebtesten Artikel reinstelle. Die, von denen ich möchte, dass die Leute sie tatsächlich lesen, was einfach hilft, die Dinge schön und organisiert zu halten. Okay. Perfekt. Das haben wir hier. Ja, ja, wir können das einfach als CMS hinzufügen , wenn wir es genauso machen wollen wie zuvor. Aber ja, ich meine, alles sieht ziemlich gut aus. Gehen wir also zu den Einstellungen und behandeln einfach ein paar wichtige Dinge, auf die Sie achten sollten, wenn Sie sollten, wenn Ihre Website fertig stellen. Lassen Sie einfach darauf verzichten, dass das geladen Sehr schnell. Okay. Der erste Ort, an dem Sie auf die allgemeine Seite gelangen. Als erstes müssen Sie Ihren Fabcon hinzufügen. Jetzt kann ein Favicon nur 32 mal 32 Pixel groß sein, und Ihr Webclip muss 256 mal 256 Pixel groß sein den Fabcon und den Webclip sehr einfach, Halten Sie den Fabcon und den Webclip sehr einfach, denn wenn sie zu detailliert sind oder zu viel los ist, sie wirklich dämlich aussehen Es sieht nicht sehr gut aus. Also halte sie super einfach. Dann gehen wir zu den Formularen. Gehen Sie hier hin und schreiben Sie einfach, Entschuldigung, gehen Sie hierher und fügen Sie Ihre E-Mail-Adresse hinzu. Dies ist die E-Mail-Adresse , an die alle Ihre Formulare gesendet werden. Wenn also beispielsweise jemand mit dem Formular Ihres Kontakts Kontakt aufnimmt , wird die E-Mail an diesen Ort gesendet . Stellen Sie dann sicher, dass Sie auf Speichern klicken Dann gehen wir zu den Plänen über. Wenn Sie also CMS wollen und ich habe CMS für jede einzelne meiner Websites mit Webflow, kostet es 29$ pro Monat, die monatlich abgerechnet werden. Es ist ein bisschen billiger, wenn Sie es jährlich erstellen, aber es ist das Geld wert, weil es Ihnen so viel Zeit spart Wenn du kein CMS willst, aber trotzdem eine benutzerdefinierte Domain möchtest, dann ist die Basisoption wahrscheinlich am besten für dich dann ist die Basisoption wahrscheinlich am besten Wenn Sie jedoch nur eine Web-Flow-Domain möchten, eine Web-Flow-Domain möchten, können Sie einfach auf den Starterplan klicken. Der Starterplan. Ich bin also offensichtlich auf dem CMS, dem CMS-Paket. Aber beim Starterplan ist die Sache so, wenn Sie keine echte Domain mit Ihrer Website verknüpft haben , Leute Sie als Agentur werden die Leute Sie als Agentur nicht wirklich ernst nehmen. Das wird Sie also davon abhalten , viel Geld verlangen zu können. Also ja, und dann können Sie natürlich Ihre Domain verbinden und schon können Sie loslegen, aber ich hoffe, es hat Ihnen Spaß gemacht, zuzusehen, wie diese Website erstellt wurde. Wenn Sie Fragen haben, lassen Sie es mich wissen. Aber ja, lass uns mit dem nächsten Abschnitt des Kurses fortfahren dem nächsten Abschnitt des Kurses und wir sehen uns dort. 62. (Remastered Audio und 16: Okay, wir werden diese E-Commerce-Website in Webflow von Grund auf neu erstellen Als Erstes müssen wir nun unsere Bibliotheken einrichten Nun, ich habe bereits einige Bibliotheken auf dieser Website heruntergeladen. Dies sind nur meine Favoriten, aber Sie können wählen , welche Sie möchten Diejenigen, die mir am besten gefallen, sind normalerweise die mit der größten Auswahl Du wirst hier also sehen, dass, du weißt schon, dieser hat 283 verschiedene Elemente. Dieser hat 226. Dieser hat 200. Also entscheide ich mich generell für diese, einfach weil es so viele Möglichkeiten gibt. Es gibt so viele Optionen, tut mir leid. Einige der anderen haben nicht so viele Optionen, daher ist es für mich etwas weniger attraktiv. Aber dann installierst du einfach die Bibliothek und klickst auf die Website, auf der du sie installieren möchtest. Und dann, glaube ich, lässt es mich nicht mehr installieren, nur weil ich schon so viele hochgeladen habe , aber für dich sollte es funktionieren, und sie sind alle kostenlos, zumindest zum Zeitpunkt der Aufnahme. Also ja, du kannst sie dir ansehen . Lass uns einfach die Dinge aufladen. Und ich werde Ihnen zeigen, wie Sie in Echtzeit eine Website, eine E-Commerce-Website, für Ihre Marke oder für die Marke Ear erstellen eine E-Commerce-Website, . Es wird nicht lange dauern. Es wird insgesamt vielleicht etwa 45 Minuten bis eine Stunde dauern. Und wir werden dir jeden einzelnen Schritt zeigen. Es wird super einfach sein. Das erste, was wir tun werden , ist, in unsere Ohrbibliothek zu gehen und eine Navigationsleiste hinzuzufügen. Okay, also lass uns diese Navbar hinzufügen. Und noch eine Sache, und nun ja, lassen Sie uns auch ganz schnell ein Foto hinzufügen Eine Sache, die ich sagen kann, ist, dass wir uns an dieser Stelle buchstäblich nur darauf konzentrieren , die Struktur der Website zu erstellen. So fangen wir jedes Mal an. Die Struktur der Website ist das strategische Skelett der Website. Ohne die Struktur, weißt du, kann die Website super hübsch sein, aber die Struktur ist die Strategie, okay? Also, okay, ich denke, für jede E-Commerce-Website könnte das funktionieren, aber ich möchte auch ein Bild, das wirklich gut aussieht, weißt du? Lass uns das hier versuchen. Lass uns sehen, ob das funktioniert. Aber ich denke, das ist ein bisschen zu kompliziert. Mm. Ja, tut es nicht, ich bin mir nicht sicher. Ich bin mir nicht sicher, ob es mir gefällt oder nicht. Lass uns das wegnehmen, lass uns das löschen weil ich nicht möchte, dass es zu kompliziert wird. Okay, da sind viele viele verschiedene Bilder drin. Okay, das will ich definitiv nicht. will ich definitiv nicht. Okay. Ja, lass uns das ändern, weil wir nicht wollen , dass es nur ein Bild ist. Wie können wir nur ein Bild finden? Lass uns einfach einen netten Helden mit nur einem einzigen Bild finden. Das ist normalerweise ein ziemlich cooler Abschnitt für solche Dinge. Ich mag diese Bibliothek für diese Art von Mindestfünfen, aber es scheint nichts da zu sein Gehen wir zu Lass uns zu diesen gehen . Ah. Da haben wir's. Das sieht ziemlich cool aus. Mm, lass uns das versuchen. Lass uns das versuchen. Das sieht ziemlich gut aus. Fantastisch. Okay, ich bin mir nicht sicher wie ich es mag, auf der rechten Seite zu sein. Ich finde, Rechtshandausrichtung, wenn Sie die Ausrichtungsstunde zu Beginn des Kurses gemacht haben , sieht das sehr komisch aus. Ich glaube, ich werde diese Reihenfolge nach links nehmen , weil sie einfach besser aussieht. Also lass uns das nehmen oder nach links. Und klicken Sie einfach auf dieses Element und nehmen Sie einfach links eine Linie, links die Linie, links die Linie, nehmen Sie diese Schaltfläche . Da haben wir's. Perfekt. Ich meine, das sieht zehnmal besser aus. Der Grund dafür, dass das besser aussieht, ist , dass die meisten Kulturen von links nach rechts von oben nach unten lesen . Es ist also einfach bequemer. Es ist uns vertrauter. Ich weiß, dass einige Religionen und andere Kulturen anders lesen, aber in den allermeisten Fällen, weißt du, wird das die beste Option für dich sein. Lassen Sie uns also einen weiteren Abschnitt hinzufügen. Wenn Sie sich also daran erinnern, bei der Erstellung der Website sollte die Startseite bei der Erstellung der Website drei Fragen beantworten. Erstens, ich bin am richtigen Ort. Also im ersten Abschnitt, dem Heldenbereich, musst du ihnen sagen, dass sie am richtigen Ort sind. Du wirst deine Zeit nicht verschwenden. Der zweite Abschnitt, den wir gerade hinzugefügt haben, ist wie ein Themenbereich, oder? Es ist wie Vertrauen aufzubauen, als ob wir an , du weißt schon, diesem Ort, diesem Ort, diesem Ort vorgestellt wurden , und das wird zeigen dass du es ernst meinst und dass du glaubwürdig bist. Der nächste Abschnitt wird, wissen Sie, letztendlich für die E-Commerce-Website sein , aber für eine andere Website wäre es in Ordnung, was können Sie mir anbieten? Was kannst du eigentlich für mich tun? Aus E-Commerce-Sicht sind wir also okay, lassen Sie uns das einfach zu Auto hinzufügen Ja, was Sie finden werden, ist bei einigen und lassen Sie uns das einfach auf vier beschränken Bei einigen Bibliotheken, die Sie verwenden, werden bestimmte Elemente aus irgendeinem Grund immer gerne auf 126 gesetzt . Ich weiß nicht, warum sie das tun. Fragen Sie mich nicht, ich habe diese Bibliotheken nicht gebaut, aber manchmal müssen Sie die Breite von 126 auf Bestellung anpassen. Wenn also etwas nicht richtig aussieht, dann schau es dir einfach an, und das ist wahrscheinlich die Antwort. Also ja, was habe ich über die Sektion gesagt? Also ja, erster Abschnitt, bin ich am richtigen Ort. Sie müssen ihnen von Anfang an zeigen, dass sie am richtigen Ort sind, zweitens landen sie auf Ihrer Website. Zweitens, kann ich dir vertrauen? Das wird ein besonderer Bereich sein oder vielleicht Kundenrezensionen oder etwas Ähnliches. Und zum Schluss, was können Sie eigentlich für mich tun? Also füge irgendein Produkt hinzu, füge irgendeine Art von, du weißt schon, Service oder was auch immer hinzu. Natürlich möchten wir für jede E-Commerce-Website die Produkte präsentieren. Und im Moment verwenden wir einen Bereich, in dem Sie unser Team kennenlernen können. Aber wir werden das sehr schnell in einen Produktbereich umwandeln. Denken Sie daran, dass wir uns im Moment buchstäblich nur auf das hier konzentrieren, das ist 126 Auto und es sieht viel besser aus. Im Moment konzentrieren wir uns nicht auf den Text, wir konzentrieren uns nicht auf die Bildsprache Sie können sehen, dass das Bild dort ein wenig Polsterung hat , also haben wir das einfach weggenommen Wir konzentrieren uns nur auf die tatsächliche Struktur der Website Die Geschichte, die wir zu erzählen versuchen. Wir wollen uns nicht damit verfangen lassen, viele verschiedene Bilder zu erstellen und Bilder gerade zu sehr zu verändern . Im Moment konzentrieren wir uns nur darauf, Struktur der Website in Ordnung zu bringen. Denn danach wird uns das helfen, Dinge zehnmal schneller zu erledigen, und wir werden in genau diesem Video buchstäblich eine Website in Echtzeit eine Website in Echtzeit innerhalb von 45 Minuten bis einer Stunde erstellen. Also werde ich Ihnen zeigen, dass es möglich ist. Okay. Also haben wir unsere ersten paar Abschnitte auf der Startseite. Fügen wir unten einen Blockabschnitt hinzu, damit wir das präsentieren können. Okay, du kannst also sehen, dass das ein bisschen komisch aussieht , oder? Sie können also sehen, dass das ein bisschen komisch aussieht. Lass uns das auf Null ändern. Bah, bah, bah. Sie können die Überschrift „Entschuldigung“ sehen . Die Überschrift lautet 126. Ändere das Auto. Gut. Okay. Das ist auch 126. Lass uns das ändern. Okay. Perfekt. Ändern wir die Marge dafür auf Null. Ideal. Wir haben den Blockbereich, wir haben das, das ist das, das sieht wirklich toll aus. Ich finde es toll, wie das aussieht. Okay. Lassen Sie uns die Größe ein wenig ändern , damit wir die richtige Struktur haben. Ich meine, das sieht ziemlich gut aus. Aus struktureller Sicht sieht es ziemlich gut aus, okay. Fügen wir ein Blockbeispiel hinzu. Schauen wir uns das an. Eine Blockseite. Auch hier werden wir nur eine Navbar und eine Fußzeile hinzufügen. Wir werden mich erschaffen. Wir werden später im Kurs eine universelle Navigationsleiste und Fußzeile erstellen . Also mach dir keine Sorgen Ich zeige dir , wie es geht. Ich später in diesem Video, sollte ich sagen? Also mach dir darüber keine Sorgen. Ich zeige dir, wie das geht. Und das wird Ihnen ermöglichen, etwas auf einer Seite zu ändern, und Ihre Navigationsleiste und Ihr Foto werden automatisch auf jeder einzelnen Seite Also ja, lassen Sie uns auf das Hinzufügen eingehen. Okay, ich denke , die sind ziemlich gut. Mir gefällt die Struktur sehr, sehr gut. Ich denke, dieser ist der beste von allen, den ich je gesehen habe, und ich habe ziemlich viel benutzt, aber dieser scheint der professionellste und ansprechendste zu sein . Stellen Sie sicher, dass es ganz links ist, sodass es mit dem Hauptteil der Website und nicht mit dem Abschnitt verbunden ist . Okay. Und jetzt gehen wir. Okay, das ist schon alles für uns gebaut. Das haben wir schon gemacht. Wir können vielleicht ein paar Dinge streichen, also können wir vielleicht ein paar dieser Mitwirkenden streichen weil es ein paar zu viele gibt, um ehrlich zu sein. Aber ja, was den eigentlichen Blog angeht, werden wir etwas später in diesem Video entweder ein CMS für den Blog oder die Produkte einrichten entweder ein CMS für den Blog , damit ich Ihnen zeigen kann, wie das geht. Wie Sie hier sehen können, ist ein CMS im Grunde wie eine Sammlung ähnlicher Dinge. Also zum Beispiel in diesem Fall Artikel oder Produkte, und Sie können Informationen speichern. Hier können Sie beispielsweise Informationen so speichern, dass Seiten erstellt werden, die für diesen bestimmten Artikel oder dieses Produkt einzigartig sind, ohne dass Sie eine neue Seite von Grund auf neu erstellen müssen. Okay? Ich werde dir später zeigen , wie das geht, aber es ist super, super nützlich. Der Grund, warum das so nützlich ist, ist, dass Sie damit mehrere Seiten in einem Bruchteil der Zeit erstellen können Sie damit mehrere Seiten in einem Bruchteil der Zeit erstellen , und sie sehen alle genau gleich aus. Sie passen also alle perfekt zur Marke. Sie müssen sich keine Gedanken über die Größe oder ähnliches machen. Super, super nützlich. Ich liebe es absolut, das CMS-System zu verwenden. Und ich werde dir später ein bisschen mehr darüber erzählen , aber ich finde es einfach super nützlich, wirklich nützlich. Sie können hier sehen, dass ich es für die Artikel für die Website der Lancaster Academy verwende die Artikel für die Website der Lancaster Academy Wir verwenden es für Produktseiten. Wir verwenden es für meine Branding-Agentur. Wir verwenden es für das eigentliche Projekt, wie die eigentlichen Projekte in den Fallstudien , die wir erstellen. Aber hier verwenden wir es nur für Inhalte. Und es ist sehr nützlich, weil Sie nicht mehrere Seiten verwalten müssen, sondern nur eine einzige Sammlung verwalten müssen, was wirklich großartig ist. Ich werde dir später etwas mehr darüber erzählen , aber ich möchte nur hervorheben, wie wichtig es ist. Ich glaube, ich habe im Moment etwa 47 verschiedene Artikel. Und natürlich haben wir die Hauptproduktseite, den eigentlichen Artikel, ob er vorgestellt wird oder nicht, es muss für Sie persönlich nicht so kompliziert sein . Du musst es nicht besonders kompliziert machen. Aber im Allgemeinen sind die einzigen Dinge , die Sie von all diesen Dingen verwenden werden, um ehrlich zu sein, wenn Sie anfangen, Klartext, Rich-Text, ein Bild, vielleicht ein Video, und das ist so ziemlich alles. Mehr als das wirst du nicht wirklich brauchen , um ganz brutal ehrlich zu sein Und dann musst du nur noch den Titel verbinden. Zum Beispiel mit dem Titel und den Ls, hier haben wir das Thema des Artikels damit verknüpft, also in diesem Fall ist es Branding, die Wiederholung. Also nur kleine Details , die sich mit jedem Artikel ändern werden , aber Sie können ein Produkt oder was auch immer, und dann können Sie es im Grunde der Seite hinzufügen , ohne es tatsächlich zur Seite hinzuzufügen. Also tippst du es einfach ein und es erledigt es einfach für dich, was super clever ist. Aber du kannst hier sehen, dass, du weißt schon, für meine Artikel wir haben, vielleicht etwa 15 verschiedene Elemente , die alle zusammenarbeiten. Und ich muss sie nicht immer wieder separat neu bauen . Ich mache es nur einmal und das war's. Lassen Sie uns also wieder mit dem Aufbau unserer E-Commerce-Website beginnen. Und wir werden später etwas mehr über CMS sprechen. Aber ich werde später auf CMS-Sammlungen eingehen. Aber lassen Sie uns vorerst einige davon löschen, weil ich nicht glaube, dass wir drei Mitwirkende brauchen. Lassen Sie uns die Social-Media-Symbole löschen. Schauen wir uns die anderen Seiten an, die wir erstellen können. Okay, okay. Lassen Sie uns die Seite mit den Blogartikeln erstellen. Das war also die eigentliche Artikelseite. Diese Seite enthält alle Artikel zusammen. Das sind also, weißt du, all die verschiedenen Artikel, die du auf deiner Website hast , auf einer einzigen Seite , sodass die Leute sie tatsächlich finden können, okay? Also finde ich deinen Artikel. Sollte ich den besten Artikel für sie sehen und finden. Ich denke, dass dies wahrscheinlich die beste Option sein wird. Schauen wir uns noch ein paar an, nur um zu sehen. Aber ich denke, um ganz ehrlich zu sein, ich denke, das könnte funktionieren, aber auch, ähm, ja, ich neige dazu, es ziemlich einfach zu halten. Ich neige dazu, die ganze Zeit dieselben Layouts zu verwenden, einfach weil sie so gut aussehen. Das hier persönlich ist quasi mein persönlicher Favorit. Ich benutze es für alle meine Websites, um ehrlich zu sein. Es sieht so gut aus. Sie können es hier sehen, es sieht ein bisschen komisch aus, also können Sie sehen , dass es wieder ein Eins-26-Problem ist. Also klick das einfach ab. Das passiert dir vielleicht nicht wirklich, aber mir passiert es immer aus irgendeinem Grund. Ich bin mir nicht sicher, ob das vielleicht einige Einstellungen auf meiner Website sind, aber ja, nur um das zu berücksichtigen. Nochmals 126. Ich werde das 126-Problem wortwörtlich markenrechtlich schützen, weil es buchstäblich das Problem ist , das am häufigsten auftaucht. Da haben wir es, aber es dauert nicht lange, bis es behoben ist, also ist das alles gut. Okay. Ist das etwas Gutes? Ja. Brauchen wir wirklich die Tab-Option oben? Vielleicht, aber vielleicht auch nicht, vielleicht lösche ich das einfach ein bisschen später. Okay. Okay, aber das haben wir jetzt. Also lass uns die Contact Dust-Seite machen. Und nochmal, Leute, erinnert ihr euch, dass wir gerade dabei sind , die Struktur der Website aufzubauen ? Wir machen nichts anderes? Wir interessieren uns nicht für Farben, wir interessieren uns nicht für Fotografie, interessieren uns nicht für die Bildsprache, wir interessieren uns nicht für den Text Wir kümmern uns um nichts außer der Struktur der Website Das wird uns helfen, die Website tatsächlich zu erstellen, also machen wir etwa 80% der Arbeit sehr schnell, sodass wir uns dann auf die anderen Aspekte der Website konzentrieren können. Also zum Beispiel die Bildsprache, zum Beispiel das Copywriting, weil das Urheberrecht meiner Meinung nach an letzter Stelle stehen sollte, weil das wirklich die meiste Zeit in Anspruch nehmen sollte Sie können hier wieder das Problem 126 sehen. Das passiert buchstäblich viel zu oft. Ähm ja, allein das Erstellen der Struktur der Website hilft dir, die Website zu sehen, wie sie aussehen kann. Und dann kannst du Dinge herausfinden und Dinge irgendwie ändern und Dinge anpassen, wie du dich fit fühlst. Aber das einfach, weißt du, sehr früh zu erledigen , ist wirklich, wirklich hilfreich. Also die Datenschutzrichtlinie und, du weißt schon, Lieferung und Versand und, du weißt schon, Haftungsausschlüsse und so, diese Art von Seiten sind wirklich einfach zu erstellen Und im Grunde denke ich, dass der beste Weg, dies tatsächlich zu tun, darin besteht nicht die Vorlagen zu verwenden, sondern einfach die Texte selbst hinzuzufügen Ich denke, dass es einfach super einfach gehalten werden muss . Ich versuche es zu komplizieren. Es wird die Leute nur ein bisschen verwirren und es ist einfach unnötig, denn seien wir ehrlich Wer liest eigentlich die Datenschutzbereiche? Die Datenschutzrichtlinie, die Haftungsausschlüsse, weißt du, all das Zeug Es ist nur für rechtliche Rechtsfragen da. Also Geschäftsbedingungen und so, du kannst die Elemente einfach separat hinzufügen . Also füge einen Abschnitt hinzu. Dann füge einfach einen Container hinzu. Nun, Sie können zuerst etwas hinzufügen, aber ich denke, das Hinzufügen des Containers ist besser, nur weil er dadurch responsiv wird. Ja, also fügen wir einen Header hinzu. Und dann können wir das hinzufügen, ähm, wir können es mit einem Absatz versuchen, aber um ehrlich zu sein, möchte ich Ihnen nur den Unterschied zwischen dem Hinzufügen mit einem Absatz und dem Hinzufügen mit Rich-Text zeigen zwischen dem Hinzufügen mit einem Absatz und dem Hinzufügen , damit Sie den Unterschied zwischen den beiden Elementen verstehen. Okay, wir haben den Header, geben Sie die Datenschutzrichtlinie ein. Und nur damit du es weißt, habe ich im eigentlichen Kurs einen Link hinzugefügt. Sie sollten in der Lage sein, unter den verschiedenen Links zu den Datenschutzbestimmungen zu finden , zu kostenlosen Versand- und Rückgabebedingungen, all dem Zeug. Und es ist oft so ziemlich dieselbe Website. Aber es ist einfach super hilfreich , all diese Links zu haben. Fügen Sie einfach all Ihre Website-Details und so hinzu. Und dann kannst du, ähm, ja, einfach all deine legalen Sachen aus dem Weg räumen. Sie versuchen, dir, du weißt schon, offizielle Dokumente in Rechnung zu stellen? Benötigen Sie sie zu Beginn Ihres Unternehmens? Ich würde nicht argumentieren. Ich denke, weißt du, wenn du entweder für einen Kunden oder für dich selbst erstellst und du gerade erst anfängst, brauchst du dann wirklich all diese wichtigen rechtlichen Dinge? Weißt du, vielleicht bist du in einer bestimmten Branche, in der es dir gut geht. Also ja, es versucht uns dazu zu bringen, Dinge zu kaufen, aber wir brauchen sie nicht. Also klicken wir einfach auf „ Nein, ich möchte keine professionelle Datenschutzrichtlinie und generieren sie dann einfach. Jetzt müssen Sie hier nicht wirklich Ihre richtige E-Mail-Adresse eingeben. In einigen Fällen tun Sie das, aber in diesem Fall nicht, weil Sie es können es gibt nur ein paar verschiedene Möglichkeiten, dies tatsächlich zu Ihrer Website hinzuzufügen. Die erste Möglichkeit besteht also darin, dies zu kopieren und einzufügen. Nun, ich habe festgestellt, dass das auf meiner Safari manchmal nicht funktioniert und manchmal auf Chroma nicht funktioniert Manchmal können Sie also in die Zwischenablage kopieren. Und was das im Grunde bedeutet, das würde im Grunde bedeuten, die Daten einzubetten. Wenn Sie sich also nicht sicher sind, was das bedeutet, machen Sie sich keine Sorgen Es dreht sich alles um HTML und Code. Sie müssen nicht wissen, wie man codiert, aber Sie können diesen Code einfach in ein Einbettungsfeld in Webflow kopieren . Das ist so , Das ist so , als würden Sie benutzerdefinierten Code hinzufügen Sie müssen nicht lernen, wie das geht. Ich möchte Ihnen nur die E-Mail zeigen, die Sie erhalten, wenn sie Ihnen die Datenschutzrichtlinie senden , damit Sie sie sehen können. Okay, da hast du's. Also schicken sie dich im Grunde einfach zurück auf dieselbe Seite. Also was ich generell gerne mache. Aber das Schöne daran ist , dass es tatsächlich all die Links zu den verschiedenen anderen Websites enthält all die Links zu den , die sie haben Wenn Sie also etwas anderes benötigen , können Sie es einfach dort finden, wirklich, wirklich nützlich. Sie haben also gerade das Ende der E-Mail überprüft und sie sollte einen Link zu all den verschiedenen Formularen und Richtlinien enthalten , die sie für Sie erstellen können. Die Art und Weise, wie ich die Richtlinie zur Website hinzufügen möchte, besteht im Grunde darin, Dateien zu generieren. Sie können also eine DOC-X-Datei generieren, die im Grunde nur eine Word-Datei ist. Und wenn du es dann öffnest , lass es mich das einfach in Chrome generieren. Aus irgendeinem Grund spielt es ein bisschen mit Safari herum . C, mach es auf. Perfekt. Also wenn wir das tatsächlich kopieren und in die Website einfügen, wenn wir es in einen Absatzabschnitt machen, dann ist das der Abschnitt hier. Wenn wir es in einen Absatzabschnitt einfügen, sieht es schrecklich aus, oder? Es ist nicht formatiert, und der Grund dafür ist, dass Absatzabschnitte nicht für große Textblöcke gedacht sind Sie sind für, weißt du, eine kleine Textmenge unter einer Kopfzeile oder ein bisschen Text gedacht eine kleine Textmenge unter , weißt du, vielleicht unter einem Video, zum Beispiel. Sie sind nicht für lange Textblöcke gedacht Was wir also tatsächlich verwenden müssen, ist ein sogenannter Rich-Text-Block. Also fügen wir das hier im Grunde hinzu. Sie können sehen, dass das ganz anders ist. Und wenn wir genau denselben Text kopieren und einfügen, ist alles formatiert und es sieht viel besser Das ist einfach, weißt du, so viel einfacher. Weißt du, du könntest sehen, dass der Abstand ein bisschen Arbeit erfordert , aber insgesamt sieht es viel besser aus, und weißt du, du kannst sein, du kannst damit viel glücklicher sein. Nun, etwas, worauf Sie achten wenn Sie diese Anbieter von kostenlosen Richtlinien und, Sie wissen schon, die Ersteller von Dokumenten nutzen. Gibt es manchmal kostenlose Richtlinien zum Datenschutz hinzufügen eine Art kostenlose Datenschutzrichtlinie für Websites und Artikel? Sie werden also auf ihre eigene Website verlinken, was wir nicht tun wollen. Also zögern Sie nicht, das zu löschen. Aber ja, du verstehst , du weißt schon, nimm dir einfach etwas Zeit, um das durchzulesen und sicherzugehen, dass da nichts steht, was gesagt wird, was nicht von dir oder deinem Unternehmen gesagt werden sollte . Okay, also die US-Seite für jede E-Commerce-Website. Auch hier fügen wir die NAF-Leiste hinzu. Wir werden das Futter hinzufügen. Und denken Sie daran, dass wir universelle NAF-Leisten und universelle Fußzeilen erstellen werden etwas später universelle NAF-Leisten und universelle Fußzeilen erstellen werden , damit es auf der gesamten Website gleich ist Und auch hier werden wir uns jetzt nur auf die Struktur konzentrieren . Behalte das einfach im Hinterkopf. Ich weiß, dass die Website im Moment nicht wie eine E-Commerce-Website aussieht, aber am Ende wird sie es tun. Und es wird nur etwa, du weißt schon, 45 Minuten bis eine Stunde dauern. Okay, also lass uns hier Abschnitt hinzufügen . Also muss die Seite „ Über uns“ für die E-Commerce-Website eine Geschichte erzählen, okay? Wir sagen den Leuten, warum Sie bei uns kaufen sollten , weil es jede Menge anderer Personen oder Marken gibt , bei denen Sie so ziemlich genau dasselbe Produkt kaufen können. Weißt du, nicht viele Produkte sind sehr einzigartig. Warum sollten Sie also bei uns kaufen? Was macht uns besonders? Wir können unsere Marke besonderer erscheinen lassen, indem wir eine Geschichte erzählen. Und das ist eines der mächtigsten Dinge. Wenn Sie also zum Beispiel auf die Rolex-Website gehen , wissen Sie, sie erzählen eine großartige Geschichte in Bezug auf jede ihrer Uhren, und, wissen Sie, es sieht einfach so aus, Sie wissen schon, dass die Bilder und alles andere Es macht einfach so viel Sinn. Und Sie können sehen, warum sie eine Premium-Marke sind. Für diese Website werden wir natürlich keine Rolex-Bilder haben, aber wir können auf jeden Fall trotzdem eine Geschichte erzählen Ich versuche hier also, eine kleine Produktseite zu erstellen Der erste Abschnitt ist also der Haro-Abschnitt. Wir werden ein bisschen erzählen, wir werden ein bisschen darüber erfahren, was uns dort einzigartig macht Und dann werden wir hier einen Abschnitt für die Produkte hinzufügen. Jetzt können wir diesen Teambereich verwenden. Das ist in Ordnung. Es hat eine wirklich tolle Struktur. Lassen Sie uns diese Elemente einfach wegnehmen. Hier. Okay. Lass uns einfach abhauen. Ja. Der Abstand hier ist ziemlich schlecht, also ändern wir ihn einfach. Also brauchen wir das Ganze nicht wirklich. Wir werden einfach wieder sagen, nehmen wir das U, nehmen wir das, was Sie zuerst tun, nur um es für Sie einfach zu halten. Okay. Lassen Sie uns zunächst die Liste so anordnen, dass wir die Dinge gut vier erledigen können , ich möchte nur vier Artikel. Ich will nur vier Produkte. Ich will also nicht, weißt du, tonnenweise Produkte da haben. Also lassen Sie uns diese erneut zu einem Abschnitt hinzufügen. Okay. Dann können wir einen Container hinzufügen. Und dann müssen wir das vielleicht gar nicht tun. Ich versuche, mir den einfachsten Weg auszudenken , das für Sie zu tun. Okay. Ähm, ich denke, wir halten die Dinge eigentlich einfach. Ich denke, wir halten die Dinge einfach. Okay. Lass uns, äh, das. Lass uns das hier haben. Dieses Raster. Okay. Ich glaube auch nicht, dass das der beste Weg ist. Okay. Also jetzt werden wir hinzufügen. werden wir einige Produkte hinzufügen. Schauen wir uns also noch einmal den Teambereich an. Sei ein bisschen kreativ. Okay. Dann ist die Formatierung natürlich einfach. Lass uns hier starten , das wird gehen, das sieht zehnmal besser aus. Lass uns etwas davon ausziehen. Lassen Sie uns diese Knöpfe tatsächlich wegnehmen. Nehmen wir den Abstand weg. Die acht Produkte zu haben, ist im Allgemeinen ziemlich viel, also nehmen wir das weg. Okay. Da haben wir's. Fällt reichlich. Wir brauchen die Social-Media-Symbole offensichtlich nicht , weil das einfach albern ist Schauen wir uns Okay an, das sieht viel besser aus. Und offensichtlich sieht es momentan immer noch wie eine TAM-Seite aus, aber wir sind es tatsächlich, lassen Sie uns diese wieder hinzufügen Ja, das macht viel mehr Sinn. Okay. Ja, wir wollen definitiv keine Social-Media-Ikonen. Aber schauen wir uns die Tatsache an , dass dies offensichtlich ein Teambereich ist, aber wir werden ihn zu einem Produktbereich machen. Wenn Sie also Abschnitte auswählen, achten Sie nicht auf die tatsächlichen Bilder in dem Abschnitt Schauen Sie genauer hin, suchen Sie mehr nach den tatsächlichen Elementen , die in dem Abschnitt enthalten sind, und nach dem Format Weil du immer Dinge nehmen und Dinge hinzufügen kannst, du weißt schon, Dinge wegnehmen, Dinge hinzufügen. Aber ich weiß nicht, ob mir dieser FAQ-Bereich gefällt. Ja, ich glaube, das werde ich loswerden. Dieser FAQ-Bereich ist nicht mein Favorit. Holen wir uns einen besseren, denn es gibt definitiv bessere da draußen. Okay, lass uns bom bom. Lass uns das hier hinzufügen. Ich denke, das wird viel sauberer und viel besser aussehen . Da haben wir's. Das sieht aus. Das sieht viel besser aus. sauberer, viel einfacher zu lesen. Perfekt. Und diese Art von Animation würde buchstäblich jemanden brauchen, weißt du, vielleicht mindestens eine Stunde oder mindestens 2 Stunden diese Art von Animation zu machen, während, du weißt schon, die Antwort im FAQ-Bereich ist, du weißt schon, sich irgendwie von selbst zu enthüllen. Das dauert buchstäblich etwa 2 Sekunden. Es ist so einfach. Und das ist es, was Web Flow so großartig macht. Das ist es, was das Element zum Erstellen einer Website buchstäblich so schnell macht , und es wird Ihnen so viel Zeit sparen. Okay. Okay, fügen wir das hier hinzu. Also nochmal, wir haben den Abschnitt, der Abschnitt sieht okay aus. Wir werden später all die verschiedenen, du weißt schon, Bilder und so hinzufügen . Aber im Moment konzentrieren wir uns nur auf die Abschnittsstrukturen, okay? Die Struktur der Seiten. Okay. Kommen wir nun zum interessanten Teil und fügen eine Produktseite hinzu. Lassen Sie uns eine tatsächliche Produktseite hinzufügen und sehen, wie sich das entwickeln wird Denn eine Sache bei den Webfloor-Bibliotheken und Vorlagen im Web Floor ist, dass es noch keine Vorlage gibt, die sich auf Produkte oder E-Commerce konzentriert Vielleicht haben sie es in Zukunft, wenn Sie sich das ansehen, haben sie es vielleicht schon. Aber lassen Sie uns hier mit dieser Blog-Vorlage eine Produktseite erstellen. Und das ist buchstäblich genau dieselbe Artikelvorlage , die wir zuvor verwendet haben. Aber ich denke, es hat einfach eine wirklich tolle Struktur. Ich denke, wenn wir dieses Zeug hier löschen, was meiner Meinung nach einfach ein bisschen besser aussieht. wir Um ehrlich zu sein, können wir das wahrscheinlich wegnehmen. Ich bin mir nicht sicher, ob diese sozialen Symbole gut aussehen. Aber ja, lass uns das einfach wirklich rausnehmen und das wegnehmen. Okay. Also, was wir jetzt tun, ist, wir werden den Produktbereich erstellen. Lass uns einfach alles zurückbringen damit ich dir genau zeigen kann, wie ich es machen will. Also werden wir den Produktartikel dort hinzufügen. Wir werden das nehmen Äh, wir werden dieses Zeug wegnehmen, glaube ich. Sie können hier sehen, wie es Scrollen mag, und es sieht einfach richtig gut aus, wenn es nach unten scrollt Ich denke, was wir tun können, ist, dass wir den Titel wahrscheinlich hier hinzufügen können den Titel wahrscheinlich hier hinzufügen Wir brauchen diesen oberen Abschnitt also nicht wirklich. Wir können einfach den eigentlichen Titel hinzufügen. Dann füge das Mm mm mm hinzu. Okay, werde das los. Also sind wir einfach mit dem unteren Teil weitergegangen , der wirklich gut scrollt Vielleicht ist das ein bisschen zu hoch. Fügen wir zwei hinzu. Okay. Es ist ein bisschen besser. Und Sie fragen sich vielleicht, wie das wie eine Produktseite aussieht? Vertrau mir. Es wird fantastisch aussehen. Vertraue dem Prozess. Also werden wir das loswerden. Wir werden all das Zeug loswerden. Wir wollen nur die eigentliche Funktion hinter den Builds, oder? Die Struktur, die eigentliche Seite selbst. Also wollen wir hier ein kleines Raster hinzufügen. Entschuldigen Sie mich. Und dann fangen wir an, Bilder hinzuzufügen. So können wir all diesen Text loswerden. Ich meine, du kannst den Text dort behalten, wenn du willst, aber für diesen Zweck möchte ich keinen Text. Ich möchte, dass das alles visuell ist. Okay. Lass uns hier ein Bild hinzufügen. Wo ist das Bild? Geben Sie einfach Bild ein. Okay? Okay, ich bin mir nicht sicher, was da passiert ist , aber dann kopiere es einfach und füge es ein, nimm die Polsterung weg. Kopiere das und füge es in den Dip-Block ein, mache es zu 100%. Perfekt. Da haben wir's. das Bild quadratisch ist, wird es quadratisch aussehen. Okay, dann füge das einfach ein. Und dann haben wir hier im Grunde genommen, schauen Sie, wir haben den tatsächlichen Titel. Also der Produktname, der Preis auf der linken Seite , den wir in einer Minute bearbeiten können. Aber dann haben wir einen schönen Scrollvorgang mit Bildern, der toll aussieht Es sieht wirklich elegant aus. Es sieht echt cool aus. Also, ich meine, das sieht gut aus. Ich freue mich darauf. Sieht das besser aus? Hängt davon ab. Abhängig von der Art des Produkts, das Sie verkaufen, könnten Sie das Raster einfach als eine Spalte platzieren . Aber ich denke, für diesen Fall werde ich es einfach bei 222 belassen. Okay. Lass uns anfangen, mit der Lücke weiterzuspielen. Also füge ich einfach eine andere Klasse hinzu, also, weißt du, du kannst das machen, wie du willst, aber ich füge jedem der Elemente auf der linken Seite nur eine kleine Lücke hinzu. Also habe ich den Titel, also die eigentliche Produktseite, also die Kopfzeile. Dann habe ich einen kleinen Absatz, nur um im Grunde ein wenig über das Produkt zu erklären. Dann habe ich das tatsächlich aufgeblasen, dann habe ich den Preis, und dann brauche ich jetzt nur noch einen Knopf, oder? Wie ein Kaufen-Button, den ich unten hinzufügen kann. Okay, kopiere Delt und füge es dann einfach in diesen Abschnitt ein. Und dann kann ich jetzt einfach weglegen, offensichtlich nicht so. Okay. Und dann muss ich nur noch hinzufügen. Los geht's. Perfekt. Perfekt, perfekt. Perfekt. Okay. Ich meine, das sieht immer noch absolut schrecklich aus, aber es wird besser aussehen. Ich vertraue mir. Okay. Wir können später herausfinden, wie die Dinge aussehen und so, aber was die Funktionalität angeht, sieht es nach einer gut aussehenden Seite aus. Okay. Okay. Was müssen wir hier noch tun? Also ich denke, ich denke, das ist so ziemlich, ich denke, das ist es. Vielleicht Mm, vielleicht fügen wir etwas einfach unten hinzu. Vielleicht fügen wir sozusagen einen zusätzlichen Produktbereich hinzu, vielleicht. Das könnte cool sein. Also lass uns das überprüfen. Über dem Hintern. Schauen wir uns das unten an. Nochmals, hier können Sie sehen, dass es sich um dasselbe Problem handelt. Außerdem werde ich Ihnen später zeigen, wie Sie Komponentenfunktion im Webflow verwenden können, mit der Sie im Grunde ein universelles Element erstellen können, das sich auf der gesamten Website ändert. Also werden wir es für den NapPar verwenden. Wir werden es für die Fußzeile verwenden. Wir werden es auch für die Produkte verwenden. Also zum Beispiel, wenn Sie vier Produkte haben , die Sie verkaufen möchten, an, Sie wissen schon, an ein bestimmtes Publikum oder zu einer bestimmten Jahreszeit. Sie können die Produkte ändern, also die vier Produkte, Sie können sie ändern, und das wird sich auf der gesamten Website ändern. Sie müssen also nicht jede einzelne Seite ändern, was sehr nützlich ist. Und so werde ich dir etwas später im Video zeigen, wie das geht, aber bleib vorerst einfach dran, und wir werden darauf eingehen. Also hier fügen wir unten einfach einen kleinen Aufruf zum Handeln hinzu, nur damit es ein bisschen professioneller aussieht. Und dann lass uns einen kleinen Blick darauf werfen. Lass uns einen kleinen Blick darauf werfen. 63. Website-Erstellung: E-Commerce-Website (Teil 2): Hier. Okay. Also schauen wir uns jetzt alle Seiten an. Wir haben alle Seiten, ungefähr dort, wo wir sie haben wollen. Lass uns anfangen, Dinge jetzt zu ändern und Dinge zu entwerfen. Also werde ich einfach ein paar Bilder hinzufügen , die ich irgendwie zusammengetragen habe, nur um die Dinge ein bisschen zu beschleunigen, nehme ich an. Also werden wir zuerst das Logo ändern. Nun, das sieht momentan nicht wie eine E-Commerce-Website aus, aber am Ende wird es viel mehr wie eine E-Commerce-Website aussehen . Vertrau mir. Okay? Also werden wir das zuerst hinzufügen. Lass uns das einfach hier hinzufügen. Dann können wir das ändern. Das sieht aus, als ob es aus irgendeinem Grund etwas gedehnt wurde . Lass uns das einfach automatisieren . Max Wit. Okay. Ich bin mir nicht sicher, warum es ein bisschen komisch aussieht. Lass mich noch einmal darauf klicken. Okay, es ist die Polsterung, da haben wir es tatsächlich. Sie können also das gepolsterte Squashnetz sehen. Da haben wir's. Das sieht viel besser aus. Fantastisch. Also ja, wir haben das, was perfekt ist. Und dann müssen wir uns nur noch die anderen Elemente ansehen. Jetzt haben wir also im Grunde die vollständige Struktur der Website fertiggestellt. Jetzt müssen wir nur noch die anderen Elemente der Website anordnen. zum Beispiel die Schriftarten ändern, können Sie sich so lange Zeit nehmen, wie Sie möchten, damit herumspielen und wirklich etwas bekommen , mit dem Sie super zufrieden sind. Aber um ehrlich zu sein, das ist der lustigste Teil. Als ob Sie die Struktur der Website erledigt haben, was ehrlich gesagt die größte Arbeit ist, wie die Strukturierung der Seiten der Website Jetzt ist es der lustige Teil. Jetzt kannst du mit Dingen experimentieren, du kannst verschiedene Versionen erstellen, du weißt schon, machen. Man kann verschiedene Bilder hinzufügen, man kann die Kopie schreiben Das ist der Teil, den ich liebe. Ich könnte buchstäblich den ganzen Tag damit verbringen, nur zum Spaß eine Website zu erstellen, weißt du? Okay, lass uns einfach ein bisschen damit herumspielen. Ich ändere nur die Schriften und so. Ich spiele nur herum. PT S scheint anständig zu sein, normale 400-Gewichte. Das klingt richtig. Das, ich ändere nur die Farben. Ich spiele nur herum, um zu sehen, was gut aussieht. Ich nehme einfach ein nettes Schwarz-Weiß-Thema. Mir gefällt allerdings, dass, wenn ich mit der Maus über den Knopf oben fahre, es irgendwie zu wirklich dunklen Grün wird, diesem wirklich eleganten Grün Okay. Okay, okay. Okay. Jetzt werde ich das ändern. Also werde ich einfach verlinken. Sie können einfach zu den Einstellungen gehen und Ihr Logo ändern , um zur Startseite zurückzukehren. Das ist ziemlich normal. Sie können natürlich auch alle anderen Seiten verlinken. Ich werde natürlich nicht alle mit dir durchgehen, aber du kannst das alleine machen. Der nächste Schritt besteht im Grunde darin , den Brunnen zu verändern und die Komponenten zu erstellen, sodass wir tatsächlich mit der Herstellung unserer internationalen Elemente beginnen können . Hier siehst du zum Beispiel, wie grün das ist. Das bedeutet im Grunde , dass die NAF-Leiste auf der gesamten Website dieselbe sein wird Wir werden genau dasselbe mit der Fußzeile machen. Also lass es uns zuerst perfekt machen. Lass uns einfach sterben, das hinauszögern, löschen. Lösche de lösche. Okay, perfekt. Da haben wir's. Da ist keine Polsterung, perfekt Und dann müssen wir nur noch die Startseite hinzufügen Zieh das aus. Oh, das ist wirklich sehr, sehr groß. Warum ist das so groß? So verrückt. Warum ist das so groß? Ich könnte das einfach auf 126 zurücksetzen. Ich möchte dort eigentlich ein 126-Problem haben. Okay, lass uns das machen. Lass uns das löschen. Ich will es nur schön und sauber haben. Ich will nicht, dass es zu voll ist. Natürlich können Sie den Text unten ändern, wenn Sie das wirklich möchten, aber wie Sie eine Komponente erstellen wählen Sie einfach das Element aus, das auf der gesamten Website gleich sein soll . Klicken Sie, erstellen Sie eine neue Komponente, geben Sie ihr einfach einen Namen und klicken Sie dann auf Erstellen. Und sobald es grün wird, wissen Sie, dass es auf der gesamten Website gleich ist. Sie können es also hier sehen, Sie können es hier sehen. Wir werden es wieder für die Produkte verwenden. Aber ja, nur für den Moment, daran, dass Sie dadurch eine Menge Zeit sparen werden. Okay, fangen wir an, mit den Bildern herumzuspielen und die Dinge an ihren Platz zu bringen Also haben wir dieses Bild hier, was großartig ist. Nochmals, bringen Sie das hier an Ort und Stelle. Okay, das sieht gut aus. Offensichtlich, Münzbasis und all diese Dinge. Das wollen wir nicht, also lassen Sie uns diese einfach ändern. Ja, lassen Sie uns die einfach ein bisschen ändern. Also können wir sie in der Daily Mail, CBS, New York Times veröffentlichen, nur um dem Ganzen ein bisschen Glaubwürdigkeit zu verleihen Okay, das sieht gut aus. Okay. Dann können wir anfangen hinzuzufügen. Natürlich können wir die Texte und so ändern. Wir können, weißt du, das ist natürlich, weißt du, ich werde nicht auf den Copywriting-Aspekt eingehen, aber, weißt du, du kannst die Dinge natürlich arrangieren, wie du willst Und wenn Sie Ihre Website entwerfen, stellen Sie sicher, dass Sie die anderen Elemente des Kurses verwenden , wie zum Beispiel die vorherigen Lektionen über, Sie wissen schon, Website-Design, über, Sie wissen schon, Webflow, Sie wissen schon, den Crashkurs über Webflow-Elemente, um Ihre Fragen zu beantworten, die Antworten zu erhalten Sie benötigen, und damit Ihre Website aussieht und Gefühl, zum Beispiel, wie man Text benutzt, du weißt schon, die verschiedenen Arten von Typografie, du weißt schon, wie man seine Farbpalette erstellt , wie man seine Farbpalette benutzt. Hier werde ich diese Ecken nur ein wenig bearbeiten , sodass sie der Schaltfläche in der oberen rechten Ecke übereinstimmen Okay. Perfekt. Okay, fangen wir an, in diesen Abschnitt einzutauchen und unsere kleine Produktpalette zu erstellen. Okay, cool. Also lass uns vier hinzufügen. Perfekt. Da haben wir's. Dann. Lass uns das ganz einfach machen . Also haben wir die Sonne da. Fantastisch, großartig, großartig. Da haben wir es, da haben wir es, da haben wir es. Okay, Neuerscheinungen. Und natürlich können Sie platzieren, was Sie wollen, aber das ist nur, okay, lassen Sie uns einfach ein paar Bilder hinzufügen. Lass uns einfach ein paar Taschen hinzufügen. Das ist für eine Modemarke, ein bisschen Schnickschnack. Eine Sache auch, wenn Sie eine E-Commerce-Marke aufbauen und möchten , dass die Website wirklich gut aussieht Ihre Produktfotografie ist buchstäblich das Wichtigste. Es ist so ziemlich das Wichtigste , wenn Sie etwas verkaufen möchten. Und eine Sache, die ich gefunden habe, ist, etwas wirklich Hellgrau oder Hellblau zu finden und das als Hintergrundfarbe anstelle von Weiß zu verwenden, nur damit wirklich Hellgrau oder Hellblau zu finden und das als Hintergrundfarbe anstelle von Weiß zu verwenden es einfach so aussieht, als ob es hilft, die Dinge einzurahmen und die Dinge super professionell aussehen zu lassen . Natürlich können Sie dann, Sie wissen schon, den Produktnamen hinzufügen und all diese Dinge machen. Ich werde deine Zeit nicht verschwenden und all das durchmachen. Aber sehen Sie hier, wie, wissen Sie, wir die verschiedenen Produkte jetzt alle angeordnet haben. Aber wir wollen einen Link erstellen , um zur eigentlichen Produktseite zu gelangen. Wenn wir also im Moment darauf klicken, es nirgendwohin führen. Also werden wir den Link-Block bekommen. Das ist ein kleines Problem. Das sieht nicht wirklich gut aus. Also lass uns zum Linkblock gehen und das ist lustig genug. Es ist 126 Auto. Lass uns das rausklicken. Da haben wir's. Gutes Zeug. Jetzt müssen wir los. Okay. Und dann können wir das buchstäblich einfach dreimal duplizieren und dann buchstäblich einfach das kopieren und einfügen, kopieren und einfügen, kopieren und einfügen und dann können wir loslegen. Dann haben wir alles mit einem Link-Block , sodass wir, wenn wir auf eine Produktseite verlinken wollten , das können. Ich mag diese Zeilen unter dem Text nicht, also lass uns das einfach abklicken. Okay. Perfekt. Und dann schauen wir uns das an, Sie wissen schon, wählen Sie einfach die Seite aus, die Sie wollen, und dann wird es automatisch und dann wird es automatisch zu dieser bestimmten Seite verlinkt. Und wenn wir dann zu diesem Abschnitt kommen, fügen Sie einfach ein schönes Bild hinzu. Okay. Fantastisch. Perfekt. Und dann schreiben wir natürlich nur ein bisschen über die Markengeschichte und bringen die Leute dazu, an dieser Stelle mehr über die Marke zu erfahren. Okay? Okay, schauen wir uns das an. Okay. Sieht ziemlich gut aus. Okay. Okay. Und ich habe buchstäblich einfach die Texte von oben kopiert und eingefügt und den Button und so, nur damit ich es nicht noch einmal erstellen muss Ich möchte einfach alles konsistent halten. Und Sie können es buchstäblich einfach kopieren und einfügen, als ob Sie es in einem Word-Dokument bearbeiten würden. Es ist super einfach. Das kannst du mit allen Knöpfen machen. Ich werde deine Zeit nicht verschwenden und, weißt du, wirklich bis ins kleinste Detail gehen, aber, weißt du, du kannst es in deiner eigenen Zeit machen, und ich will es dir nur einmal zeigen, damit du verstehst, wie Okay, das haben wir also alles. Okay, lassen Sie uns den Blog bearbeiten, nur weil dieser Block offensichtlich ist. Diese Blockbeiträge sehen im Moment nicht wirklich gut aus. Da haben wir's. Also mach sie einfach ein bisschen markanter, schätze ich. Fantastisch. Sieht gut aus. Okay, perfekt, perfekt. Perfekt. Okay, Mode, Mode, Mode. Fantastisch. Okay. Jetzt geben wir gerade den letzten Schliff. Wir wollen einfach buchstäblich, weißt du, die Dinge an ihren Platz bringen, alle Bilder an ihren Platz Weißt du, wenn wir ein bisschen Text ändern, brauchen wir die Mitarbeiter nicht Ich finde, es sieht nicht so sauber aus. Ändere das in Schwarz oder Grau oder so. Ja. Halte die Dinge einfach und nett. Aber ja, im Moment spielen wir buchstäblich nur mit Dingen herum, und ich könnte Stunden damit verbringen, das zu tun, also buchstäblich einfach, weißt du, verschiedene Farben zu machen und, du weißt schon, verschiedene Dinge auszuprobieren. Das ist buchstäblich mein Lieblingsteil des gesamten Prozesses. Ich liebe es absolut. Also ja, nimm dir Zeit damit. Weißt du, du hast die Struktur erstellt. Das ist der wichtigste Teil. Nun, sie sind beide gleich wichtig, aber die Struktur ist wichtig, weil sie tatsächlich dazu beiträgt , das Erlebnis für den Benutzer zu schaffen Erlebnis für den und ihn dazu zu bringen, dorthin zu gehen, wo Sie ihn haben möchten. Aber jetzt können Sie Spaß der tatsächlichen Ästhetik und dem tatsächlichen Erscheinungsbild der Website haben. Hier wird es super interessant. Also hier ist die Artikelseite, also nochmal, du kannst das einfach ändern. Ich werde Ihnen später zeigen, wie Sie ein CMS-System einrichten . Es ist super einfach, super einfach, also mach dir keine Sorgen. Aber ich werde Ihnen in Kürze zeigen, wie Sie das für diese bestimmte Marke tun können. Wir brauchen keine Mitwirkenden. Ich glaube nicht. Wir müssen auf jeden Fall unseren Newsletter abonnieren , denn die E-Mail-Liste ist König. Also haben wir das alles. Das alles haben wir. Okay. Jetzt brauchen wir diese Navigationsleisten nicht mehr, weil wir unsere universelle Navigationsleiste haben , mit der wir sicherstellen können, dass Sie sie mit der Fußzeile verbinden , los geht's Und dann können wir loslegen. Und dann können wir genau das Gleiche mit der Navigationsleiste oben machen, was großartig sein wird. Und dann sind wir da. Also buchstäblich werden die Navigationsleiste und die Fußzeile gleich sein , egal wo auf der Website, wir gehen Es wird immer dasselbe sein. Es wird uns immer das gleiche Aussehen geben , das gleiche Gefühl. Wenn wir etwas ändern, wird es sich auch auf den anderen Seiten der Website ändern. Auch hier können Sie sehen, dass wir die NAV-Leiste normalerweise von Grund auf neu erstellen müssten die NAV-Leiste normalerweise von Grund auf neu und das immer wieder tun und sie dann immer wieder ändern müssten, aber das müssen Sie nicht, wenn Sie die Komponente erstellen. Stellen Sie also sicher, dass Sie das tun, es wird Ihnen eine Menge Zeit sparen. Okay. Also hier kannst du natürlich die Farbe der Dinge ändern , wenn du das wirklich willst. Offensichtlich werde ich es dafür einfach behalten. Ich werde es einfach schwarz halten. Du weißt schon, ändere deine Daten, all diese Dinge. Ich werde das einfach ändern, damit es ein bisschen mehr auf die Marke ankommt. Perfekt. Okay, cool. Das ist erledigt, weißt du, L, wir bauen buchstäblich eine Website in etwa 45 Minuten bis einer Stunde, und jetzt ist es so gut wie fertig, weißt du. Es ist so, nicht zu weit weg. Okay, fügen wir das hinzu. Also in Echtzeit, schauen wir uns das hier an. Also, tolle Taschen. Natürlich werden wir den Leuten erzählen, wie toll unsere Taschen sind. Lass uns hier einfach ein neues Bild hinzufügen. Okay. Füge einfach dieses Bild hinzu. Um die Gründer dieser Taschenfirma zu präsentieren. Es sind nette Gründer. Okay. Also sind wir jetzt an einem Punkt angelangt, an dem wir buchstäblich die Taschen, die Taschen und so wieder herstellen müssen. Das will ich nicht tun. Ich möchte so faul wie möglich sein, wenn es darum geht, die Website zu erstellen und zu verwalten. Wir werden also eine Komponente erstellen. Also werden wir zur Startseite zurückkehren, während wir diese Arbeit schon einmal gemacht haben. Wir werden uns den eigentlichen Abschnitt ansehen, okay? Wir werden sicherstellen , dass es der richtige ist, dann klicken wir und erstellen eine neue Komponente. Also schau. Okay, also nimm den, der dem Körper am nächsten ist. Klicken Sie dann auf Komponente. Dann gehen wir zu Produkten usw., los geht's. B, bam bam Dann gehen wir zurück zur Seite. Also haben wir die Komponente jetzt erstellt. Das wird auf jeder einzelnen Seite der Website gleich sein. Okay? Also lasst uns eintauchen und uns die CIFA-Ladungen ansehen Okay. Also, weißt du, wir müssen es auch auf dieser Seite hinzufügen. Also lass uns das einfach wegnehmen, weil wir es nicht brauchen. Abschnitt, löschen. Und dann holen wir uns das. Da haben wir es perfekt. Fantastisch, großartig, großartig, großartig, großartig, großartig, großartig. Da haben wir's. A, b, bum, bum, bum pa, ba, ba, ba, put put, bum put Schauen wir uns das mal an. Schau dir das an. Okay. Winken wir einfach, damit das ein bisschen geladen wird. Eine Sache, die ich festgestellt habe, ist, dass der Webflow auf Safari tendenziell besser funktioniert, und ich bin mir nicht sicher, warum. Entschuldigung, es funktioniert besser auf Chrome. Es funktioniert nicht so gut auf Safari, und ich arbeite gerade an Safari. Und ja, es ist ein bisschen langsamer, aber es ist nicht so schlimm. Es funktioniert immer noch, aber es ist ein bisschen langsamer. Ja, Sie können also sehen, dass ich die Komponente verwendet und sie einfach direkt eingefügt habe, und es ist auf der gesamten Website gleich Hilfreich. Stellen Sie also sicher, dass Sie das tun, wenn Sie denselben Abschnitt oder denselben, Sie wissen schon, Teil der Website an mehreren verschiedenen Stellen auf der Website haben Sie wissen schon, Teil der Website an mehreren verschiedenen Stellen auf möchten. Stellen Sie sicher, dass Sie es hinzufügen, weil es Ihnen buchstäblich so viel Zeit und Energie spart, Leute. Vertrau mir. Okay. Also füge ich hier nur einen kleinen Abschnitt „ Kontakt aufnehmen“ hinzu. Okay, verbinde uns einfach mit der Kontaktseite. Perfekt. Okay. Auch hier müssen wir das Foto nicht erneut erstellen. Wir können das buchstäblich einfach löschen und das, das aus dem Komponentenbereich hinzufügen lassen. Da haben wir's. Fantastisch. Das sieht so gut aus. Können Sie sich erinnern, dass das überhaupt nicht wie eine E-Commerce-Website aussah? Jetzt sieht es tatsächlich wie eine E-Commerce-Website aus? Die Magie von Zeit, Zeit und Geduld. Okay. Also wir können jetzt sehen, dass der Text und so etwas natürlich geändert werden kann, aber, weißt du, wir haben hier einen ziemlich guten Start. Das wird die eigentliche Produktseite sein. Das wird also wahrscheinlich die Sache sein, bei der es, du weißt schon, wichtig ist , es richtig zu machen. Also haben wir die zusätzlichen Produkte, die es gibt? Das ist gut. Fangen wir an, das aufzupeppen und die Dinge in Gang zu bringen Also nochmal, damit kannst du sehen, dass das nicht am Körper Geh auf die Leiche. Da haben wir's. Nun, das ist besser, und dieser auch. Also nochmal, wir müssen das nicht noch einmal machen . Oh, warte eine Sekunde. Wir haben das schon einmal gemacht, oder? Wir haben diesen Abschnitt schon einmal gemacht. Wir müssen diesen Abschnitt nicht noch einmal machen. Also lass uns zurückgehen. Und nochmal, so sollten wir arbeiten, Leute. Also müssen wir sicherstellen , dass wir uns in Zukunft Zeit sparen, denn dein zukünftiges Ich wird es dir danken. Sie müssen also zum Abschnitt zurückkehren, erstellen, also wählen Sie einfach den Abschnitt aus, den Sie kopieren möchten. Dann erstelle das, ich suche tatsächlich danach. Ich suche hier tatsächlich danach. Ich weiß nicht, warum ich das mache. Okay. Lass uns, das ist falsch. Okay, was mache ich? Was mache ich? Scott, reiß dich zusammen. Also, was ich dort gemacht habe, ist, dass ich im Grunde die Fußzeile zu diesem Abschnitt hinzugefügt habe dass ich im Grunde die Fußzeile zu diesem Abschnitt anstatt eine Komponente zu erstellen Stattdessen wähle ich eine neue Komponente aus, erstelle sie und kontaktiere uns Da haben wir's. Jetzt haben wir das in Grün. Jetzt können wir zur Produktseite gehen, und jetzt können wir sie am Ende des Abschnitts hinzufügen , der hier ist. Da haben wir's. Und das können wir hier einfach hinzufügen und alles wird okay sein. Perfekt. Da haben wir's. Schön und sauber. Sieht toll aus. Okay. Lassen Sie uns jetzt dieses hässliche Futter loswerden und unser gutes Futter oder unser Markenfutter installieren Okay, großartig. Und jetzt fangen wir an, das, du weißt schon, zu verfeinern und zu arrangieren, weil ich denke, ich denke, wir müssen hier nur ein paar Bilder für das Produkt einbauen und alles arrangieren. Okay. Ich habe schon ein paar Bilder arrangiert. Schauen wir uns die an. Da haben wir's. Sie sollten ziemlich gut aussehen. Ich habe sie gerade hier runtergeholt und eine Art Vorlage online gestellt. Also nochmal, das ist nicht das Produkt , das ich tatsächlich besitze oder so. Ich habe sie gerade online gefunden, also dachte ich, es wäre ziemlich cool, sie nur zu verwenden, um sie dir zu zeigen. Okay. Also haben wir das. Füge einfach diese Bilder hinzu. Wirklich einfach. Sie können jetzt sehen, dass die Seite langsam ein bisschen zum Leben erwacht, oder? Nur wegen der Bilder, und lassen Sie uns zwei weitere hinzufügen Ich denke, ungefähr sechs Bilder sind ungefähr richtig. Da haben wir's. Los geht's, wir gehen da, wir gehen. Okay. Fantastisch. Okay. Gutes Zeug. Sieht gut aus. Sieht gut aus. Sieht gut aus. Die Tasche sieht wirklich groß aus, wenn sie sie in der Hand hält. Ich wusste nicht, dass sie so groß ist. Okay, großartig. Okay, Button, lass uns einfach diesen Kontakt-Button stehlen und ihn einfach da reinlegen. Und das werden wir jetzt einfach ändern . Natürlich werden wir nicht zur DS-Kontaktseite gehen. Wir würden entweder, wissen Sie, zu einem Zahlungsabwickler oder zum E-Commerce-Tarif auf Webflow gehen , den ich etwas später mit Ihnen durchgehen werde. Und es hat ein bisschen mehr gekostet, aber es ist definitiv eine gute Investition, wenn Sie eine E-Commerce-Marke wären. Okay. Also, ja. Okay, der tatsächliche Preis. Lass es uns nicht zu billig verschenken. Das brauchen wir nicht wirklich. Wir brauchen den Abschnitt nicht wirklich, oder? Ja. Lass uns das einfach loswerden, aber dann können wir etwas hinzufügen, zum Beispiel limitierte Lagerbestände oder so, Beispiel limitierte Lagerbestände oder so nur um ein bisschen Dringlichkeit zu schaffen Aber diese rosafarbene Farbe macht es nicht wirklich für mich, also was ich tun möchte, ist, ich möchte ein Blau oder so etwas verwenden, wie ein cooles Blau Ich denke, das wird wahrscheinlich ein bisschen besser aussehen. Gehen wir zu den Hintergründen über. Schönes Blau. Da haben wir's. Das sieht aus, ich meine, ja, das sieht anständig aus. Das sieht anständig aus. Damit bin ich zufrieden. Okay. Dann Blogshop. Jetzt sieht es ziemlich gut aus. Es sieht ziemlich gut aus. Natürlich würdest du den Text hinzufügen, die eigentliche Produktseite, den Namen des Produktartikels, all das Zeug. Aber jetzt was ich dir zeigen möchte. Ich möchte Ihnen CMS sehr schnell zeigen, weil CMS Ihnen im Gegensatz zu Komponenten viel Zeit sparen wird. CMS wird Ihnen eine Menge Zeit sparen. Nun, das ist der Bereich Actual E-Commerce. Das ist natürlich etwas, das, wenn Sie tatsächlich für den E-Commerce-Plan bezahlen, dann bekommen Sie ihn und er ist bereits vollständig aufgebaut, es ist bereits alles eingerichtet, sodass Sie sich um nichts kümmern müssen, also kaufen Sie einfach den Plan und dann können Sie einfach alles einrichten. Und wenn Sie Fragen haben, wenden Sie sich entweder uns oder Sie können sich direkt an Weblow wenden Webflow eignen sich normalerweise am besten für den eigentlichen E-Commerce-Bereich, da sie Sie mithilfe von Videos durch die einzelnen Schritte führen können mithilfe von Videos durch die einzelnen Mit dem CMS können Sie jedoch eine CMS-Sammlung für die verschiedenen Produkte erstellen , die Sie verkaufen Der Grund, warum dies sehr hilfreich ist , ist zum Beispiel, schauen wir uns diese Assets an. sind also alle Produkte, die wir an der Lancaster Academy auf unserer Website verkaufen Lancaster Academy auf unserer Website Dies dient buchstäblich nur dazu, Menschen dabei zu helfen, ihre Marken auf einfachste Weise aufzubauen Wir haben also verschiedene Dinge wie den Namen, du weißt schon, die Verkaufsstelle, weißt du, was das Ding so besonders macht. Aber wir können tatsächlich eine CMS-Sammlung für die Produkte erstellen . Auf Ihrer Website. Es ist wirklich einfach. Also zum Beispiel werden wir hier einfach herumspielen, oder? Wir werden einfach diese bestehende CMS-Sammlung verwenden diese bestehende CMS-Sammlung und einfach ein Markup daraus erstellen Lassen Sie uns zum Beispiel einfach alles auf dieser Seite löschen Also lass uns das einfach kopieren. Kopieren. Das habe ich kopiert. Okay. Und lass uns hier zum anderen Abschnitt gehen. Wenn Sie sich diese Seite hier ansehen, ist das nur eine Produktseite, die wir zuvor entworfen haben. Und wir können die Seite, die wir gerade für die E-Commerce-Marke entworfen haben, buchstäblich nehmen und sie verwenden , um etwas im CMS zu erstellen. Also eine CMS-Sammlung, die es uns ermöglicht, Produkte hinzuzufügen, Produkte zu verwalten und Produkte zu ändern, und ich werde Ihnen gleich zeigen, was ich meine. Also löschen wir alles von dieser Seite und wir werden es kopieren und einfügen. Also haben wir das, was perfekt ist. Dann können wir einfach unseren NAF-Riegel und unser Futter hinzufügen. Hier hier. Okay, dann füge einfach den Fuß von dort hinzu. Dann fangen wir an, alles miteinander zu verknüpfen. Also machen wir das zum Beispiel einfach schnell. Ich werde keine brandneue SMS-Sammlung erstellen. Oder CMS-Sammlung, sollte ich sagen. Wir werden die Seite gerade neu erstellen. In einer CMS-Sammlung. Weil sich dies im Moment auf einer statischen Seite befindet. Dies ist die CMS-Seite. Die lila Seiten sind die CMS-Seite, wie Sie in der oberen linken Ecke sehen können. Sie hat das kleine lila Kästchen. Das ist die CMS-Seite, das Zeichen für eine CMS-Seite. Okay, lass uns die Dinge hier einfach neu arrangieren. Damit die Dinge gut aussehen. Okay. Also fügen wir unsere Komponente einfach wieder mit den verschiedenen Produkten hinzu. Sieht perfekt aus. Okay, großartig, großartig, großartig. Da haben wir's. Okay. Das sieht gut aus. Nun, wenn wir uns ansehen, eine Seite oder ein System auf der CMS-Seite zu erstellen . Sie können hier sehen, dass wir, wenn wir auf etwas klicken , die Möglichkeit haben, es nicht nur zu ändern, sondern es auch mit etwas zu verknüpfen. Okay? Also lass mich dir zeigen, was ich meine. Also gehen wir zum CMS-Bereich. Blog-Sammlungen. Das ist nur eine Sammlung , mit der wir nur herumspielen. Lass es uns ein bisschen bearbeiten. Also lass uns das einfach löschen. Und dann lass uns einfach die Sammlung blockieren. Okay, sieh mal, das alles bereits existierende Sachen aus einer Blocksammlung, die wir vor einiger Zeit gemacht haben. Wir haben jetzt einen neuen. Aber wenn wir uns zum Beispiel nur die Bilder ansehen, verwenden wir einfach die Bildfelder Okay? Also haben wir dort vier Bilder. Lassen Sie uns zwei weitere hinzufügen. Also werden wir Bild fünf einfügen. Dann Bild sechs. Okay. Perfekt. Dann haben wir den Namen. Also können wir das einfach als Produktnamen verwenden. Wir haben das. Wir können das einfach als Inhalt verwenden. Und dann haben wir Block Author, was wir auf die Preisgestaltung ändern können, a? Also nochmal, wir machen die Dinge hier einfach superschnell, nur um dir zu zeigen, wie es geht, okay? Also Sammlung speichern. Gott segne dich. Entschuldigung, sollte ich das sagen? Kannst du hier sehen, wie wir, anstatt das Bild zu ändern, es mit einem Feld im CMS verbinden. Also klicken wir auf einen kleinen lila Button und wir haben Nummer eins, Nummer zwei, Nummer drei, das ist Nummer vier. Okay. Wir könnten also auf Bild ersetzen klicken, aber wir wollen das Bild nicht ersetzen. Wir wollen es mit dem eigentlichen CMS verbinden. Okay. Also haben wir es da. Also verbinde diese eins mit fünf. Und dann verbinde dieses mit Bild sechs. Da haben wir's. Perfekt. Diese beiden, lass uns sie einfach verbinden und sehen, was passiert. Verbinde dich mit vier, dann verbinde diesen einen mit drei. Okay. Cool. Lassen Sie uns das also mit dem Namen oder dem Titel des Titelblocks verbinden , aber es könnte der Produktname sein, was auch immer. Das verbindet das mit dem Betreff des Inhalts. Verbinde das mit dem Preis. Wenn wir es dort finden wollen, gehen wir. Und dann verbinde das mit dem Link. Wir würden das im Grunde damit in Verbindung bringen, weißt du , ob wir eine Zahlung machen, quasi eine Zahlung. Prozessor, oder wir fügen der Karte etwas hinzu , wir verknüpfen es einfach mit einem Prozessor für diesen Fall, wir verknüpfen es einfach mit einem wie P Pal oder Pioneer oder Air Walx oder so, aber Sie können es so oder so machen Jetzt ist also alles weg, was ein Problem ist, aber es ist eigentlich kein Problem. Lass mich dir zeigen warum. Wenn wir hier also fünf Arten von Platzhaltern für Bestellungen hinzufügen, sorry, Artikel, können Sie sehen, dass wir das haben Wenn wir nun einfach vier davon löschen, weil sie unsere Gehirnenergie verschwenden, und wir gehen zurück zu den Blocksammlungen, fügen einfach ein Beispiel für eine Tasche hinzu und schauen uns die Bilder an Ignoriere einfach alles andere, konzentriere dich einfach auf die eigentlichen Bereiche, auf die wir uns konzentrieren Wir haben sechs Bilder , die wir hinzufügen müssen. Sie können hier sehen, wie im Moment, als Beispiel für eine Tasche, und wir haben sechs Bilder, die absolut nichts mit Taschen zu tun haben, okay Und der Text ergibt keinen Sinn. Gehen wir also zurück zum eigentlichen CMS-Element. Und lassen Sie uns ein Bild der Tasche hinzufügen. Fügen wir ein weiteres Bild hinzu. Also fügen wir gerade die Bilder der Taschen hinzu. Ein solches hier. Und dann fügen wir natürlich die anderen beiden Elemente oder die anderen beiden Bilder am Ende hinzu. Okay, gut. Und dann zum inhaltlichen Thema, y, lass uns einfach etwas Verrücktes schreiben, weißt du, was für eine tolle Tasche. Ich wünschte, ich könnte buchstabieren. Okay, cool. Und dann Price, lass uns einfach etwas da rein stecken. Wir werden einfach ein bisschen mehr Text da rein stecken. Alles scheint in Ordnung zu sein. Bild fünf und sechs wurden aus irgendeinem Grund nicht aktualisiert, aber ja, das ist ein anderes. Mach dir darüber noch nicht zu viele Gedanken. Okay. Also werde ich es dir zeigen, weil Bild fünf und sechs noch nicht aktualisiert wurden, also zeige ich dir, was das bedeutet. Preis, lass uns den Preis einfach ganz schnell ändern. 79$. Stellen Sie sicher, dass Sie das 1$-Zeichen da reinschreiben Und dann versuchen wir es zu speichern, aber es wird uns tatsächlich zurückwerfen weil der Link falsch ist. Los geht's, also fügen wir einfach den Slog hinzu. Speichern heißt es, es ist nicht richtig. Also wenn du wieder runter gehst, werden wir sehen. Also müssen wir da tatsächlich einen Link hinzufügen , wie einen echten Link. Für dieses Beispiel nehmen wir einfach einen Link von der Domain. Okay. Da haben wir's. Speichern Sie es und es sollte funktionieren. Und dann sollte alles perfekt sein. Abgesehen von zwei Bildern sollte das falsch sein, weil wir sie noch nicht aktualisiert haben. Und das ist sicher genug. Da haben wir's. Die beiden Bilder unten sind falsch. Okay. Also, was können wir damit machen? Okay? Also müssen wir im Grunde zurück ins CMS gehen und die Bilder der Tasche hinzufügen. Das ist die einzige Lösung, mit der wir es zu diesem Zeitpunkt irgendwie schaffen können. Sie sind beide mit den richtigen Dingen verbunden, aber sie sind einfach nicht mit dem richtigen Bild verbunden , sie sind nicht mit dem richtigen Bild verbunden. Gehen wir also zu, das ist in Ordnung. Das ist gut. Das ist gut. Das ist gut. Lassen Sie uns diese beiden einfach gegen die Bilder von der Tasche austauschen und dann können wir loslegen. Okay, geh cool. Also das sollte die Dinge dort automatisch einrichten. Und dann glaube ich, ich mag es aus irgendeinem Grund sehr , die Bilder von dem Mädchen unten zu haben . Also lass uns das einfach auf den Grund gehen. Also werde ich diese Kopie einfach kopieren und einfügen und sie unten einfügen. Da haben wir's. Da haben wir's. Nimm Da gehen wir. Perfekt. Fantastisch. Okay. Ideal. Das sieht gut aus. Damit bin ich ziemlich zufrieden. Okay. Unglaublich. Also ja, also ist jetzt so ziemlich alles vorbereitet. Ja, ich meine, so einfach ist es, eine CMS-Sammlung zu erstellen und eine wirklich gut aussehende Produktseite zu erstellen eine wirklich gut aussehende Produktseite , auf der Sie einfach all Ihre Produkte haben können. Weißt du, wir haben buchstäblich eine komplette E-Commerce-Website in weniger als, du weißt schon, weniger als einer Stunde und 10 Minuten erstellt eine komplette E-Commerce-Website in weniger als, du weißt schon, weniger als einer Stunde und , wirklich, wirklich schnell. Und eine Sache, die ich Ihnen nur zeigen möchte , sind die Einstellungen. Wenn wir zu den Seiteneinstellungen gehen, also ein paar wichtige Dinge die Sie meiner Meinung nach wissen sollten, bevor Sie die Dinge beachten sollten, sind Stoff. Stellen Sie sicher, dass es 32 x 32 Pixel ist, Ihr Webclip, stellen Sie sicher, dass es 256 mal 256 ist. Machen Sie sie nicht zu kompliziert. Sonst werden sie schrecklich aussehen. Formen. Stellen Sie sicher, dass Sie Ihre E-Mail-Adresse in das Formular eingeben. Dadurch wird lediglich sichergestellt , dass alle Personen, die Sie kontaktieren, alles an Ihre tatsächliche E-Mail-Adresse gesendet werden, die relevante, und stellen Sie sicher, dass Sie sie speichern und veröffentlichen. Auch gut geplant. Bei E-Commerce-Websites müssen Sie also sicherstellen, dass Sie entweder einen E-Commerce-Site-Plan auswählen. Also eines davon, ich glaube nicht, dass Sie etwas anderes als den Standard benötigen werden , um ehrlich zu sein, aber offensichtlich, wissen Sie, es liegt ganz bei Ihnen. Aber ich denke, Sie können auch eine Verbindung zu einem Zahlungsabwickler herstellen, wie Pay pL oder etwas anderes, und sie die Leute auf diese Weise bezahlen lassen und einfach das CMS oder das Basissystem verwenden. Wenn du nur ein oder zwei Produkte hast, dann könntest du einfach das Basisprodukt verwenden und es einfach so machen. Das Problem mit dem Starter ist, dass Sie keine benutzerdefinierte Domain hinzufügen können, sodass Sie nicht wirklich professionell und glaubwürdig aussehen. Es ist also sehr unwahrscheinlich, dass die Leute bei Ihnen kaufen. Und außerdem, weißt du, du kannst nicht mehr als fünf Seiten erstellen, also ist es ein bisschen nervig. Aber wenn du deine Domain hinzufügen möchtest, kannst du das hier tun. Später im Kurs habe ich noch ein Video, in dem du lernen kannst, wie das geht. Aber stellen Sie einfach sicher, dass Sie alles veröffentlichen, und das ist so ziemlich alles. Ziemlich einfach, ziemlich unkompliziert. Und ja, es ist einfach wirklich, wirklich gut, alles aufzuschlüsseln, und ich hoffe, dir hat diese Lektion genauso viel Spaß gemacht wie mir, sie zu machen. Okay. Bis bald. Tschüss. 64. (Remastered Audio und 16: Okay, wie Sie sehen können, fangen wir Null an und erstellen diese Website von Grund auf neu. Jetzt müssen wir als Erstes mit dem Aufbau der Webseitenstruktur beginnen. Und das können wir tun, indem zum Web-Flow-Layout gehen und dann einige grundlegende Vorlagen aus der Bibliothek hinzufügen. Und hier gibt es einige wirklich gute, zum Beispiel dieser ist wirklich gut. Das ist eine, die ich ziemlich oft benutze. Ähm, besprechen Sie einfach, es hat die größte Auswahl. Ich mag die , die, du weißt schon, die meisten Optionen haben , nur damit ich mit verschiedenen Formaten herumspielen kann . Also ja, die, die , du weißt schon, die größte Auswahl haben, das sind die, die ich wählen werde. Und dann fügst du es einfach der Bibliothek hinzu. Sie sind alle völlig kostenlos. Und sobald Sie sie hinzugefügt haben, können Sie sie einfach verwenden. Und es ist absolut fantastisch. Jetzt habe ich schon zu viele auf meinen Konten, sodass ich kein weiteres hinzufügen kann. Aber ich habe sowieso schon die , die ich verwenden möchte, also kann ich sie einfach verwenden ohne sie erneut installieren zu müssen, okay? Also lassen wir das Laden einfach hinter uns und dann können wir weitermachen Aber der Aufbau der Webseitenstruktur ist extrem wichtig , denn das macht buchstäblich, Sie wissen schon, 50 bis 60% der eigentlichen Arbeit Wissen Sie, beim Aufbau einer Website müssen Sie sicherstellen, dass die Strukturen stimmen. Fangen wir also damit an, du weißt schon, uns eine dieser Bibliotheken anzusehen. Lass uns diese benutzen. Das erste, was wir uns ansehen sollten, ist die Erstellung einer Navigationsleiste. Jetzt, etwas später, zeige ich Ihnen, wie Sie die NAV-Leiste so erstellen , dass Sie sie nur einmal erstellen müssen und sie dann nie wieder erstellen müssen. Und wir werden das Foto auch erstellen, aber das machen wir etwas später. Schauen wir uns das vielleicht an. Ja, der sieht gut aus. Okay, perfekt. Also, wir werden das Logo ändern, weißt du, ein bisschen du weißt schon, die Schriften und die Farben und so, ein bisschen später. Aber im Moment konzentrieren wir uns nur auf die Struktur der Website. Also mach dir noch keine Gedanken über Farben und Bilder und so. Das machen wir später. Im Moment suchen wir nur nach einem schönen Heldenbereich für unsere Website. Und natürlich ist diese Website für eine persönliche Marke bestimmt. Wir suchen also nach etwas, das die persönliche Marke, wissen Sie, auf hervorragende Weise repräsentieren kann die persönliche Marke, wissen Sie, auf hervorragende Weise repräsentieren . Ich meine, der sieht eigentlich ziemlich gut aus. Der sieht ziemlich vielseitig aus. Es hat ein schönes großes Bild. Es wird sehr reaktionsschnell sein. Ja, lass uns das nehmen. Der sieht ziemlich gut aus. Wir können mit Dingen herumspielen, Dinge löschen, Dinge danach ändern. Im Moment konzentrieren wir uns wieder nur auf die Struktur der Website. Okay? Suchen wir nach einem weiteren Abschnitt, den wir unter dem Heldenbereich hinzufügen können. Und auch das ist super einfach zu bedienen. Sie können sie einfach per Drag & Drop ziehen und, wissen Sie, es ist supereinfach Ehrlich gesagt verstehe ich nicht, wie Webflow es so einfach gemacht hat, superschöne Websites zu erstellen Okay, fügen wir hier diesen kleinen Vertrauensbereich hinzu , der im Grunde besagt, dass wir vorgestellt wurden, oder dass wir ihn zumindest als Featured In-Bereich verwenden können. Achte nur darauf, dass wir es auf der linken Seite haben, also ist es ein eigener Abschnitt, weil es sonst irgendwie mit dem vorherigen Abschnitt verbunden sein wird . Okay. Also das sieht gut aus. Wir können das später ändern, aber auch hier konzentrieren wir uns momentan nur auf die Struktur. Mach dir keine Gedanken über die Farben und so, denn sonst dauert es viel länger, die Website zu erstellen. Konzentrieren Sie sich einfach darauf, die Struktur zu erstellen. Okay. Also ja, wir können das etwas später ändern und haben vielleicht einen kleinen, im Abschnitt vorgestellt , der gut sein wird und das Vertrauen bei den Besuchern unserer Website stärken wird. Schauen wir uns jetzt etwas an. Für die Dienstleistungen oder Dinge, die wir im Wesentlichen anbieten können. Ja, das sieht gut aus. Okay. Perfekt. Wir können die Symbole ändern, wir können den Text später ändern. Das ist kein Problem, aber mir gefällt, wie das aussieht weil wir letztendlich mit der Helden-Sektion beginnen. Also nochmal, das ist der Grund, warum du hier bist, wir sagen dir genau, warum du hier bist. Dann sagst du uns, nun ja, dann sagen wir ihnen, dass sie uns den ausgewählten Bereich anvertrauen können . Und danach sagen wir ihnen, was, naja, der Besucher der Website, dann sagen wir ihnen: Okay, das können wir für Sie tun. Das sind zum Beispiel die Dienstleistungen, die wir anbieten können, oder das ist es, was ich als persönliche Marke für Sie tun kann. Okay. Jetzt ein netter kleiner Bewertungsbereich. Das sieht gut aus. Und wir können einfach hinzufügen, weißt du, vielleicht, du weißt schon, ein paar Zeugnisse von beiden Wissen Sie, was auch immer Ihre persönliche Marke ist, Sie können sie hier hinzufügen Und lassen Sie uns tatsächlich einen Blockabschnitt hinzufügen. Das wäre gut. Nur um unser Fachwissen zu zeigen. Und ich denke, wir werden daraus eine Fashion-on-Modeling-Website für eine persönliche Marke machen, was ziemlich viel Spaß machen sollte. Okay. Super, dann lass uns einfach ein Futter hinzufügen Okay. Das hier, das sieht ziemlich sauber aus. Okay, perfekt. Das sieht gut aus. Okay. Wir können einige dieser Dinge später ändern. Eines der Dinge ist aus irgendeinem Grund, die Breite in der Größenangabe, manchmal wird sie automatisch auf 126 gesetzt, und Sie können es hier sehen, es sieht nicht wirklich gut aus. Und Sie können es ganz einfach ändern, indem buchstäblich zu dem Element gehen , das 126 ist, und es einfach auf Auto setzen, und es korrigiert es. Es richtet im Grunde alles richtig ein. Aber ja, aus irgendeinem Grund macht es das. Aber es spart mir so viel Zeit beim Erstellen von Websites, dass es mir egal ist. Ich ändere diese gerne. Ich nehme mir 10 Minuten Zeit, um sie zu ändern, weil ich mit diesen zehn Platten so viel Zeit beim Erstellen von Websites sparen so viel Zeit beim Erstellen von Websites kann. Sie sind sehr hilfreich. Okay. Perfekt. Fantastisch. Ich bin ziemlich zufrieden damit, wie die Homepage aussieht. Fangen wir an, uns mit dem Aufbau der nächsten Seite zu befassen, meiner Meinung nach der Blog sein wird. Fangen wir an, die Blog-Seite zu erstellen. Okay. Also nochmal, die Fußzeile. Jetzt nochmal für die Fußzeile und für die NAV-Leiste. Wir zeigen es Ihnen oder ich werde Ihnen später zeigen, wie Sie eine universelle NAF-Leiste erstellen Sie müssen sich keine Gedanken über das Hinzufügen von Titeln oder irgendetwas anderem Konzentrieren Sie sich einfach darauf, die Struktur der Website aufzubauen. Ich weiß, dass ich das immer wieder sage, aber ja, es ist wirklich wichtig, weil ich Ihnen nur zeigen möchte, wie Sie buchstäblich in 45 Minuten eine unglaubliche Website erstellen können buchstäblich in 45 Minuten eine unglaubliche Website erstellen . Wie wir es im wahrsten Sinne des Wortes tun werden, wird es etwa 45 bis 50 Minuten dauern , diese Website zu erstellen. Okay. Also lass uns diesen Blockabschnitt hier haben. Das wird wieder so sein, stellen Sie einfach sicher, dass es links oben ist, damit es nicht in andere Elemente eingreift , also ist es auf sich allein gestellt. Okay, das sieht cool aus und wir werden das danach bearbeiten. Also mach dir keine Sorgen. Ich weiß, dass es momentan nicht sehr modisch oder nach persönlicher Marke aussieht , aber ich werde dir später zeigen, wie du es bearbeiten kannst. Also mach dir keine Sorgen. Okay, großartig. Okay, wir haben das. Jetzt haben wir die SMS-Einstellungen , und ich werde dir zeigen, wie man sie einrichtet, weil das so viel Zeit spart. Hier können Sie zum Beispiel sagen, dass ich tonnenweise Artikel habe. Das erspart mir das Erstellen vieler verschiedener Seiten für verschiedene Artikel. Anstatt also, Sie wissen schon, 50 oder 100 verschiedene Seiten zu erstellen , kann ich einfach eine Seite erstellen. Und das ist zum Beispiel der Blog der Lancaster Academy Weißt du, ich habe vielleicht 50 bis 80 Artikel drin und nur eine einzige Seite, so dass ich, wenn ich wollte, buchstäblich Tausende von verschiedenen Artikeln haben könnte , und ich muss nie zweimal dieselbe Seite erstellen Es ist buchstäblich nur eine Seite und sie wird automatisch ausgefüllt, sodass sie jedes Mal, wissen Sie, super professionell und markengerecht aussieht und sich auch so anfühlt jedes Mal, wissen Sie, super professionell und markengerecht aussieht und Aber es nimmt nur die Zeit in Anspruch, es einmal richtig zu machen. Wenn Sie es dann einmal richtig gemacht haben, müssen Sie es nie wieder erstellen. Also werde ich dir etwas später und gegen Ende zeigen, wie das geht. Aber im Moment zeige ich dir nur ein paar verschiedene Dinge, zeige ich dir nur ein paar die du tun kannst, um, du weißt schon, die eigentliche Blockseite ein bisschen schöner aussehen zu lassen ein bisschen schöner aussehen Also werden wir die Farben und so etwas später ändern und so etwas später Mach dir darüber keine Sorgen, aber so sollte eine gute Blockseite aussehen. Weißt du, es könnte definitiv verbessert werden. Ich könnte dir den eigentlichen Inhalt auf jeden Fall ein bisschen näher bringen. Aber so sollte es letztendlich insgesamt aussehen. Okay. Also, und das sind all die verschiedenen Artikel, die ich habe, ja. Ich habe also insgesamt 47, und ich werde Ihnen später im Kurs zeigen, wie Sie die verschiedenen CMS-Einstellungen einrichten die verschiedenen CMS-Einstellungen , weil Sie so viel Zeit sparen werden. Und es kostet ein bisschen, wenn Sie die Website tatsächlich hosten, wenn Sie die CMS-Einstellungen möchten. Aber wenn Sie das CMS-Setup auswählen, können Sie Ihr Leben einfach zehnmal einfacher machen. Es ist einfach so eine lohnende Investition. Schauen Sie zum Beispiel hier, Sie können sehen, dass der Name des eigentlichen Blogartikels mit dem Backend der Website verknüpft ist, was letztendlich, Sie wissen schon, der Seite sagt, was sie einfügen soll. Es sagt ihnen also den Titel. Es sagt ihnen, wie viele Minuten Lesezeit es sind, welches Thema es sich handelt, welches Bild sie einfügen sollen. Weißt du, es treibt den Inhalt voran. Es ist also buchstäblich so hilfreich. Und ich werde dir später zeigen, wie das geht , aber ehrlich gesagt kann ich nicht erklären, wie viel Zeit dir das sparen wird. Also, ja, ich will das nur wirklich, wirklich rüberbringen. Aber L Fangen wir an, uns unsere eigentliche Blog-Seite anzusehen. Schauen wir uns K an, also das ist 126, also ändern wir das. Okay, das sieht also gut aus. Um ehrlich zu sein, sieht alles ziemlich gut aus. Es ist keine 1 Million Meilen entfernt. Vielleicht nehmen wir sie einfach weg, weil wir nicht drei Mitwirkende brauchen. Das brauchen wir nicht. Wir brauchen auf jeden Fall eine kleine Anmeldung für den Newsletter. Das wird auf jeden Fall hilfreich sein , denn als persönliche Marke möchten Sie Ihre E-Mail-Liste wirklich erweitern. Das ist buchstäblich das Wichtigste. Also, großartig. Lass uns das machen. Blogartikel, Fantastisch, genial. Lass uns das machen. Lassen Sie uns tatsächlich die Art der Haupt-Blog-Seite machen , auf der wir all die verschiedenen Blogbeiträge zeigen , die wir tatsächlich erstellt haben , damit die Leute unsere Inhalte tatsächlich lesen können. Okay. Welcher sieht eigentlich am besten aus? sieht ziemlich cool aus, aber ich möchte sie einfach alle zusammen sehen. Okay. Ja, lass uns diesen tatsächlich benutzen. Lass uns einfach sehen, wie das aussieht. Und nochmal, Leute, denkt daran, wir werden sein, wir sind gerade dabei, eine Struktur zu schaffen. Wir konzentrieren uns buchstäblich auf nichts anderes. Wir werden alles in, du weißt schon, ungefähr 20 bis 25 Minuten ändern . Also mach dir keine Sorgen. Halte durch und wir werden es überstehen, und es wird großartig aussehen. Okay, ja, das waren 126, also musste ich das nur ändern. Auch hier können wir alle Texte ändern, das kannst du hier sehen. Das hier sieht nicht gut aus. Also müssen wir das überprüfen. Ja, das sind auch 126. Ändere das. Das sind auch 126. Ja, also, ich meine, es ist ein bisschen nervig, das zu ändern, wenn Sie diese vorgefertigten Vorlagen verwenden, aber sie sparen Ihnen ehrlich gesagt so viel Zeit. Also es lohnt sich wirklich, weißt du? Perfekt. Perfekt. Perfekt. Das sieht gut aus. Das sieht gut aus. Das wird so gut aussehen, wenn wir da tatsächlich ein paar, du weißt schon, Blogbeiträge reinbekommen . Okay. Gehen wir zur Kontaktseite über. Nun, diese Seite wird sehr einfach sein, also werden wir eine NaF-Balke hineinwerfen Was nett und einfach ist. Und noch einmal, wir werden das etwas später brandmarken. Lass uns auch das Kontaktformular machen. Das sieht gut aus, aber ich denke, Mm. Welcher sieht aus? Das sieht nicht einmal nach einem Kontakt oder einer Sektion aus, oder? Ich denke, das ist wahrscheinlich das beste, oder? Ja, der sieht gut aus. Okay. Lass uns das benutzen. Auch hier gilt: Achte nur darauf, dass es ganz links ist. Sie können es dort auf der rechten Seite sehen. Sie müssen sicherstellen, dass es sich nicht in anderen Behältern oder Abschnitten Okay. Perfekt. Also nochmal, nimm einfach die von, denn das sind 126. Man kann sehen, wenn es ein bisschen zerkratzt ist. Man kann es erkennen. Okay, das sieht gut aus, das sieht wieder sauber aus. Wir werden alle Farben und so etwas später ändern. Aber das sieht ziemlich gut aus. Ich bin ziemlich zufrieden damit. Okay. Was kommt als Nächstes? Lassen Sie uns die Seite mit den Datenschutzrichtlinien machen, denn ja, diese Art von Seiten sind für so ziemlich jede Art von Website sehr wichtig , um ganz ehrlich zu sein. Aber vor allem für eine persönliche Marke, bei der Sie natürlich sicherstellen möchten, dass Sie, wissen Sie, alles legal geregelt haben. Ich zeige dir später, wie du an deinen Datenschutzrichtlinientext und all diese Dinge kommst deinen Datenschutzrichtlinientext . Ich zeige dir , wie das geht, weil es wirklich, wirklich einfach ist. Aber ja, es wird dir nur helfen , die Dinge wirklich, wirklich einfach in Ordnung zu bringen. Weil, weißt du, niemand eine vollständige Datenschutzrichtlinie ausschreiben oder auch nur für eine bezahlen möchte . Das ist definitiv nicht das, was du willst. Also ja, wir werden nach einem Abschnitt suchen. Ich glaube, ich denke, es einfach manuell zu machen. Wir müssen dafür nicht einmal eine Vorlage verwenden. Fügen wir hier einfach einen Abschnitt hinzu. Nur ein normaler Abschnitt. Nochmals, stellen Sie einfach sicher, dass es mit dem Körper verbunden ist. Dann fügen wir eine Überschrift hinzu. Lassen Sie uns jetzt tatsächlich einen Container hinzufügen. Der Container wird also nur dafür sorgen , dass alles schön und ansprechend ist und dass es nicht, du weißt schon, zu den Seiten überläuft schön und ansprechend ist und dass es nicht, du weißt schon, zu den Seiten überläuft Wir fügen eine Kopfzeile hinzu und dann fügen wir den normalen Text hinzu, den Absatztext Außerdem fügen wir einen kleinen Rand dazwischen hinzu. Oben im Abschnitt. Dann fügen wir auch einen kleinen Rand zwischen der Kopfzeile und dem Absatz hinzu, nur um sicherzugehen. Das ist also die eigentliche Website, für die Sie Ihre Datenschutzrichtlinie abrufen können. Ich werde es irgendwo im Kurs hinzufügen , nur damit du es bekommen kannst, aber es ist im Grunde eine kostenlose Datenschutzrichtlinie. Es ist wirklich, wirklich einfach zu bekommen. Und ich werde den eigentlichen Link irgendwo im Kurs hinzufügen. Stellen Sie also sicher, dass Sie sich das ansehen. Und benutze es. Aber es ist wirklich einfach. Sie werden versuchen, Ihnen, Sie wissen schon, professionelle Datenschutzrichtlinien in Rechnung zu stellen. Aber wissen Sie, zu diesem Zeitpunkt in Ihrem Geschäft bin ich mir nicht sicher, ob Sie es benötigen, aber Sie können hier sehen, dass sie versuchen, Ihnen 24$, 14$, 24$ in Rechnung zu stellen 14$, 24$ Weißt du, letztendlich ist es ein Geschäft, also versuchen sie, Geld aus dir herauszuholen, aber du musst es nicht Sie lassen es so aussehen, als ob du es tun musst, aber, weißt du, das tust du wirklich nicht, um ganz brutal ehrlich zu sein Okay. Da haben wir's. Also lass mich einfach den nächsten Schritt machen. Okay. Es bittet mich darum. Ja, das wollen wir nicht als professionelle Datenschutzrichtlinie. Ja, also ja, gib mir einfach meine Datenschutzrichtlinie und dann können wir alle loslegen. Fantastisch. Sie müssen dafür nicht wirklich Ihre E-Mail-Adresse eingeben. Sie können es einfach direkt von hier aus übernehmen. Für einige Dinge müssen Sie jedoch Ihre genaue E-Mail-Adresse angeben. Sie wissen also, Sie können Ihre korrekte E-Mail-Adresse eingeben, aber das ist letztendlich unsere Datenschutzrichtlinie. Alles bereit zu gehen. Jetzt können wir es in unsere Zwischenablage kopieren Lass uns das versuchen. Versuchen wir, es in die Zwischenablage zu Und dann können wir versuchen, es so auf die Website zu bringen, dass alles bereits formatiert ist, was großartig wäre Und Sie können sehen, ich habe buchstäblich 5 Minuten gebraucht, um diese Datenschutzrichtlinie zu erstellen, vielleicht, ich weiß nicht Es ging also super schnell. Lassen Sie mich nachsehen, ob sie mir die E-Mail geschickt haben. Okay, ja, sie haben mir geschickt, sie haben mir die E-Mail schon geschickt. Okay, lass uns sehen, wie wir es am besten bekommen. Okay. Also haben sie mich gerade zurück zur eigentlichen Seite geschickt. Okay, ich versuche herauszufinden das am besten für Sie tun kann, nur um Ihnen eine Menge Zeit zu sparen. Nun, wir generieren Dateien. Das wird wahrscheinlich das Beste sein. Okay. Perfekt. Lass uns das machen. Lass uns eine Entendatei machen. Okay. Fantastisch. Und dann lass uns das öffnen. Und dann denke ich, wir sollten in der Lage sein , das einfach zu kopieren und in den Rich-Text-Bereich einzufügen. Also müssen wir das vielleicht ändern. Lass uns das machen. Lassen Sie uns das einfach zu einem Rich-Text-Abschnitt hinzufügen . Ich zeige dir, wie das geht. Wir müssen es herunterladen. Fantastisch. Da ist es also. Wir haben buchstäblich eine vollständige Datenschutzrichtlinie parat, formatiert mit Überschriften, Unterüberschriften, Leerzeichen und allem Wir müssen vielleicht die Dinge ein wenig aufräumen, aber weißt du, das ist, weißt du , das ist Sie können also sehen, dass der Grund, warum das passiert ist, darin besteht, dass es sich hier um ein Absatzelement Und wir müssten im Grunde den gesamten Abstand selbst vornehmen. Und ich glaube nicht , dass das so sein wird , das wäre so eine Zeitverschwendung. Also ich denke, einen reichhaltigen Text zu schreiben. Da haben wir's. Lass uns das benutzen. Das wird uns eine Menge Zeit sparen. Okay? Also kopieren wir es buchstäblich und fügen es wieder ein und schauen uns das an. Ich sah zehnmal besser aus. Fantastisch. Weißt du, vielleicht haben wir ein paar Leerzeichen dazwischen gesetzt, aber insgesamt, weißt du, kann man alles sehen, alles ist da. Weißt du, es ist alles formuliert. Du solltest unbedingt auschecken. Das kannst du sehen. Es heißt kostenloser Generator für Datenschutzrichtlinien. Sie können das löschen, wenn Sie möchten. Das ist nur ein Link auf die Website, um andere Leute zu finden. Du kannst es wieder sehen, ihr Aussehen. Es sagt dir, dass du das einfach löschen kannst. Das ist nicht nötig. Aber ja, Sie können sehen, dass es alles bietet, was Sie brauchen, und es ist auch super schnell und einfach, und Sie müssen nicht dafür bezahlen, um eine Datenschutzrichtlinie für Ihre Website zu erhalten. Ich denke, das ist eine kleine Geldverschwendung , besonders für ein Start-up. Also ja, das haben wir. Perfekt. Lassen Sie uns jetzt mit der Seite Über uns beginnen, da die Seite Über uns sehr wichtig ist. Wir wollen eine Geschichte erzählen. Wir wollen einen Raum haben, in dem wir den Leuten tatsächlich zeigen können, warum sie uns vertrauen können , was wir ihnen bieten können, wissen Sie, wie wir uns in der Welt als persönliche Marke positionieren . Das ist also eine großartige Gelegenheit dafür. Lassen Sie uns also einige Abschnitte einbauen , damit wir unsere Geschichte auf leicht verdauliche Weise erzählen Okay? Das sieht gut aus. Okay, wir können dort vielleicht ein Video hinzufügen, vielleicht. Mmm, vielleicht. Okay. Also das ist im Grunde ein Leuchtkasten. Also, was ein Leuchtkasten ist, ist, wenn du auf den Leuchtkasten klickst, wenn du auf den kleinen Player-Button klickst, erscheint ein Video oder, oder, du weißt schon, ein Bild In diesem Fall denkt sie sich also ein Video aus Also können wir das Video ändern. So können wir zum Beispiel ein persönliches Markenvideo haben, um den Leuten von uns zu erzählen und, weißt du , warum sie uns letztendlich vertrauen oder uns wählen oder bei uns kaufen. Aber ich glaube nicht, dass ich ein Video auf dieser speziellen Website haben möchte . Ich denke, wir werden es einfach nett und einfach mit einem schönen Bild halten . Lass uns etwas finden , das einfach wirklich sauber ist. Ich bin mir nicht sicher, ob da wirklich etwas drin ist. Ich verwende diesen speziellen Satz von Vorlagen häufig, und ich glaube nicht dass ich hier etwas verwenden kann. Ich meine, es gibt wahrscheinlich etwas, aber ich glaube nicht, dass es etwas gibt, das, du weißt schon, wirklich bahnbrechend sein wird Okay. Ich meine, das könnte funktionieren, schätze ich. Das könnte funktionieren. Ich meine, es ist sauber, weißt du, es ist nicht zu aufdringlich. Okay. Lass uns mehr herausfinden. Schauen wir uns noch ein paar Abschnitte an. Und zu diesem Zeitpunkt, an dem Sie Ihre Seite „Über Mai“ oder „Über uns“ erstellen. Auch hier möchten Sie die Leute nicht überwältigen. Du willst ihnen nur etwas über dich erzählen. Du willst ihnen sagen, weißt du, du weißt schon, wer du bist, worum es dir geht, du weißt schon, was dich anders macht, all diese Dinge. Das Zeug ist das Wichtigste. Was ich jetzt suche, ist, dass ich nach einigen Dingen suche , damit wir ihnen sagen können, was wir tun. Also der obere Teil ist immer okay, , wie sieht die Gesamtmission aus? Also, wie sieht unsere allgemeine Positionierung aus, weißt du, was uns von anderen unterscheidet? Dann können wir anfangen, den Leuten zu sagen, okay, das ist es, was uns unterscheidet, aber das kann ich dir tatsächlich anbieten. Also das ist ein Service oder, du weißt schon, unsere Produkte, die ich anbiete und die ich dir verkaufen kann, weißt du, wenn du ein Fan bist oder was auch immer. Okay, also ja, lass uns diesen Abschnitt ausprobieren. Okay. Ja, die können wir hinzufügen. Wir können die arrangieren. Das ist kein Problem. Das sieht gut aus. Und wir können einfach hinzufügen, weißt du, vielleicht brauchen wir nicht alle vier, vielleicht brauchen wir nur zwei, aber wir werden sehen. Zu diesem Zeitpunkt ist es nicht wirklich wichtig. Wir können danach Sachen löschen. Aber ja, wir müssen uns nur vergewissern. Manchmal kann das übrigens ein bisschen knifflig sein, wenn wir versuchen, Abschnitte zu bekommen und Abschnitte in Abschnitte zu unterteilen, und, weißt du, es kann manchmal einfach ein bisschen lästig sein Also sei einfach bereit, einfach an den Dingen herumzufummeln. Also wollen wir nur einen kleinen FAQ-Bereich hinzufügen. Und wir haben, los geht's, wir haben einfach alles zusammengebrochen, und dann okay, das sieht ziemlich gut aus. Sie können hier sehen , dass das zerquetscht wird, also werden wir einfach okay sein Ja, ich glaube, wir müssen nur die Marge wegnehmen. Es gibt eine Marge von 13. Aus irgendeinem Grund gibt es bei Bildern immer einen Rand von 13, und das ist sehr nervig. Aber auch hier spart es dir so viel Zeit. Ja, es lohnt sich. Okay. Fügen wir also diesen FAQ-Bereich unten hinzu, und dann sollte das so sein. Ich denke, das sollte so ziemlich unsere allgemeine About-Seite sein, so ziemlich fertig. Ich glaube nicht, dass wir wirklich viel mehr tun könnten. Ja. Also wir versuchen gerade, die tatsächliche Struktur der Seite herauszufinden , nur weil wir die Teile haben, die wir brauchen, aber wir haben einfach zu viele Probleme, ich habe Mühe, sie hineinzubekommen. Okay, das sieht okay aus. Okay. Wir haben das Foto unten. Wir haben den Bereich mit häufig gestellten Fragen, Ah, warum ist das hier unten? Okay. Lass uns, lass uns das in etwas anderes ändern. Okay. Ja. Ja, lassen Sie uns das einfach behalten. Ja, das sieht gut aus. Das sieht gut aus. Okay, dann lass uns das einfach so arrangieren , dass alles zusammengeklappt wird, damit es ein bisschen einfacher zu verwalten ist. Wir fügen den Fuß unten hinzu und dann fügen wir die FAQ hinzu. Da haben wir's. Perfekt. Da haben wir's. Das sollte gut sein. Fantastisch. Und diese Webseiten-Seite sieht super sauber und super professionell aus. Es ist responsiv, was im Grunde bedeutet, dass es auf jedem Gerät funktioniert , da es bereits eingerichtet ist. Lass uns das einfach auf zwei reduzieren, weil wir nur zwei wollen. Wir wollen die Leute nicht überwältigen Aber diese Seite sieht, weißt du, super gut aus. Okay. 65. (Remastered Audio und 16: Fangen wir also an, mit dem Napa herumzuspielen. Fangen wir tatsächlich an, die Website zu entwerfen , weil wir jetzt die tatsächliche Struktur haben Fangen wir an, Dinge zu entwerfen. Ich habe die Farben der Knöpfe gegen Farbe geändert , nur um zu sehen, wie sie aussehen. Aber im Moment füge ich nur ein paar Bilder und einige Symbole und so hinzu, die ich zuvor ausgewählt habe. Sie können sich also natürlich etwas Zeit nehmen, um diese Symbole und, Sie wissen schon, Bilder und so für sich selbst, für Ihre eigene Marke oder vielleicht für die persönliche Marke Ihres Kunden zu finden. Aber ja, wir fügen hier nur ein Logo hinzu, also nur ein wirklich einfaches Skriptlogo, das ich bei Google gefunden habe. Also ich glaube, da steht Evelyns. Also lass uns einfach diese Website für Evelyn machen. Also nochmal, wir haben gerade das kleine Kästchen gelöscht, und das bedeutet buchstäblich, einfach darauf zu klicken und es zu löschen, wie Sie es in einem Word-Dokument tun würden Wir werden zu spät mit dem Button da drüben sein. Der Login-Button, weil wir ihn nicht brauchen. Aber wir wollen, dass wir den Home-Button nicht brauchen, weil wir uns einfach das Logo holen können Gehen Sie hier zum Link. Und dann können wir es buchstäblich in den Einstellungen so einstellen, dass es ganz einfach zur Startseite zurückkehrt, wenn Sie auf das Logo klicken . Und das ist bei vielen Websites ganz normal. Wenn Sie auf das Logo klicken, gehen Sie nach Hause. Wir werden das mit mir machen, also ist das gut. Wir ändern das auf Ja, machen wir es einfach in einem Geschäft. Im Moment ist es nicht wirklich wichtig, aber ich möchte nur sichergehen, dass wir, dass ich dir ungefähr zeige, wie du Dinge ändern kannst, wie Text und Bilder. Und dann, weißt du, kannst du Dinge selbst machen. Wenn Sie erst einmal verstanden haben, wie man Bilder ändert, wie man Dinge löscht, dann können Sie einfach, Sie wissen schon, Dinge nach Ihren eigenen Wünschen Okay, also willkommen bei meiner persönlichen Marke. Okay. Dann werden wir dieses Bild ändern. Ändere es gegen dieses . Okay. Perfekt. Nun zu diesem Abschnitt, weißt du, wir wurden offensichtlich nicht in Webflow oder Zoom oder, du weißt schon, in Inhalten für Spotify oder so vorgestellt, oder vielleicht wurdest du auf Spotify vorgestellt, aber wir wollen nur ein paar relevantere Logos von Nachrichtenagenturen, Netflix und ähnlichem wir wurden offensichtlich nicht in Webflow oder Zoom oder, du weißt schon, in Inhalten für Spotify oder so vorgestellt , oder vielleicht wurdest du auf Spotify vorgestellt, hinzufügen aber wir wollen nur ein paar relevantere Logos von Nachrichtenagenturen, , nur damit es ein bisschen realistischer aussieht. Entschuldigen Sie mich. Aber ja, bei den eigentlichen Logos, bei solchen Abschnitten, möchte ich, dass alles dieselbe Farbe hat. Wenn ich kann, nur weil es einfach viel sauberer aussieht, als tonnenweise verschiedene Farben hat. Also habe ich sie einfach alle grau angeordnet. Also sieht es einfach viel sauberer aus. Okay, dann, ja, du kannst die Knöpfe einfach so ändern, wie du willst. Und natürlich können Sie wählen, was Sie in den Text schreiben. Sie können die Dinge ändern, wie Sie sich fit fühlen. Wissen Sie, ich zeige Ihnen nur eine grobe Vorstellung davon, was Sie tun können, und gebe Ihnen einige Ideen, und dann können Sie einfach tun was Sie für Ihre Marke am besten halten, weil es Ihre Marke ist, es ist Ihr Unternehmen, es ist oder Ihr Kunde. So können Sie Ihr Fachwissen auf das anwenden, was Sie zuvor in unseren anderen Kursen zum Thema Website-Design oder in diesem Kurs gelernt haben zuvor in unseren anderen Kursen , und einfach Ihre eigene Version erstellen. Es ist wirklich wichtig , dass du dein eigenes Ding machst. Okay. Also, jetzt werden wir einfach diese Symbole ändern. Die Art und Weise, die Symbole zu ändern, ist wirklich einfach. Anstatt die Symbole zu ändern, können Sie diese Symbole also nicht wirklich ändern. Stattdessen fügen Sie einfach ein Bild ein, also klicken Sie auf das Symbol, dann kopieren Sie ein Bild und fügen es ein, und dann ändern Sie einfach die Größe und löschen dann einfach das eigentliche Originalsymbol. Das ist also das Originalsymbol. Sie kopieren das Bild und fügen es ein. Und dann änderst du es buchstäblich . Es ist also super einfach. Und stellen Sie natürlich sicher, dass es klein genug ist, dass es in die kleine Blase passt. Und dann ja, das können, du weißt schon, für Dienstleistungen stehen oder was auch immer sie wollen. Offensichtlich muss sich daran nicht viel ändern. Ich werde Ihre Zeit nicht damit verschwenden Bewertungen und so hinzuzufügen, denn das ist offensichtlich etwas, das Sie in Ihrer Freizeit tun können. Aber lassen Sie uns einige relevantere Bilder für den Blog hinzufügen. Aber natürlich können Sie dafür den CMS-Bereich verwenden, und ich werde Ihnen später in etwa zehn, 15 Minuten zeigen, wie Sie dieses Ale machen können. Okay, also löschen wir sie einfach , weil wir sie nicht brauchen. Aber ich denke, es ist ein bisschen zu voll. Du kannst sie behalten, wenn du willst, aber ich wollte das vorerst nur löschen. Ich denke, lass uns die Farbe dieser Knöpfe ändern, weil aus irgendeinem Grund die Rosatöne einfach hervorstechen und es einfach nicht gut aussieht Also lass es uns ändern. Es gibt ein paar Möglichkeiten, wie Sie es ändern können. Ich mag das Tool mit der Pipette. Ja, die Farbe sieht viel besser aus. Okay. Fantastisch. Das sieht gut aus. Okay. Also, jetzt können wir das genauso gut ändern, also können sie einfach das Bild ändern und es dann einfach löschen. Also löschen, löschen, löschen. Und dann formatiert es einfach schon für dich. Nehmen wir zum Beispiel an, Sie sind nicht auf Twitter, löschen Sie es einfach. Darauf verlinkt, Facebook und Instagram. Behalten wir einfach die beiden. Okay. Okay. Dann, mit den Links, einfach wortwörtlich zum Link gehen. Ja. Also, wenn du auf deinem Facebook bist, kannst du einfach deinen Link hier hinzufügen. Und das wird auf dein Facebook verlinken. Sie können auch auf „Neuen Tab öffnen “ klicken, das ist manchmal sehr nützlich. Das bedeutet einfach, dass die Seite der Website nicht verändert wird, sodass sie immer noch auf Ihrer Website angemeldet sind oder Ihre Website geöffnet haben, aber sie öffnen einfach einen neuen Browser in ihrem Telefon auf ihrem Desktop. Also ja, ich würde nicht empfehlen, mehr als drei oder vier Tabs in deiner Fußzeile zu haben mehr als drei oder vier Tabs in deiner Fußzeile zu Also ja, wir haben hier nur ein paar verschiedene Tabs , nur um dir zu zeigen, dass du sie ändern kannst, und das ist wirklich einfach Du klickst buchstäblich einfach auf den Link. Hier, schau, der EI-Fußzeilen-Link. Dann klickst du buchstäblich einfach auf das kleine Zahnrad und dann kannst du einfach wählen, auf welche Seite es geht Ich werde nur die Farbe des Hovers ändern. Also zum Beispiel, los geht's. Wir können es also grundsätzlich so ändern , dass, wenn jemand mit der Maus darüber fährt, es eine andere Farbe annimmt, und wir können dasselbe mit dieser machen Also einfach wortwörtlich auf den Link klicken. Geh nach oben, um zu schweben. Dann trennen Sie es einfach. Das ist wirklich wichtig. Klicken Sie auf das kleine Hilfsmittel mit der Pipette. Da haben wir's. Dann haben wir die beiden erledigt, aber wir haben die Ressourcen noch nicht ausgeschöpft. Das ist die Sache, die wir nicht gemacht haben. Also werden wir uns das einfach besorgen. Wir werden genau das Gleiche tun, ho. Da haben wir's. Und dann haben wir buchstäblich die Verbindung unterbrochen, die Verbindung unterbrochen. Da haben wir's. Und da haben wir's. Dann können wir einfach den Hex-Code hinzufügen und schon kann es losgehen. Wir sind bereit zu rocken . Fantastisch. Okay. Ich meine, du kannst natürlich verschiedene Links in Navar hinzufügen und so, aber ich will dir nur ungefähr zeigen, wie du das machen kannst , nur um die Dinge für dich wirklich einfach zu halten Und dann kannst du mit Schriften herumspielen, und du kannst mit Farben herumspielen und genau herausfinden, was du willst Dies ist jedoch nur ein Crashkurs zum Erstellen der Website. Also, was ich hier mache, ist , eine Komponente zu erstellen, also letztendlich eine universelle Navbar Also, was du tust, und ich zeige es dir nochmal mit der Fußzeile. Also wählst du das Element aus. Also in diesem Fall ist es die Fußzeile, okay? So können Sie sehen, wie die Fußzeile ausgewählt wird, die gesamte Fußzeile. Okay. Gehen Sie dann zu diesem kleinen Feld, klicken Sie auf Neue Komponente erstellen und beschriften Sie sie dann einfach, erstellen Sie sie einfach. Und sieh mal, es ist jetzt grün. Wenn es grün ist, bedeutet das, solange das Element grün ist. Egal auf welcher Seite der Website es sich befindet, es wird dasselbe sein. Wenn Sie es also auf einer Seite ändern, wird es sich auf allen Seiten ändern, sehr nützlich sein kann. Okay. Fangen wir an, die Blog-Seite zu gestalten. Lassen Sie uns ein paar Dinge abnehmen, weil ich nicht möchte, dass es zu voll wird. Lass uns die Farbe ändern. Also ändere das, ändere auch diese Farbe. Ändern wir es auf Dunkelblau. Okay. Ich wechselt auch zu Dunkelblau. Warum wir es einfach behalten, behalten wir es eigentlich rosa. Das ist ein Bild. Also nochmal, ich habe nur ein paar Bilder bevor ich das arrangiert habe, nur um sicherzugehen, dass ich sie fertig hatte, und ich respektiere deine Zeit Okay. Also aus irgendeinem Grund wird das nicht geladen. Lassen Sie uns für den Moment einfach eins davon unterbringen. Perfekt. Und dann dieser Inhalt. Ich zeige Ihnen also in einer Sekunde, wie Sie das CMS einrichten. Und wenn Sie erst einmal verstanden haben, wie man ein CMS einrichtet, wird es buchstäblich alles daran ändern, wie Sie tatsächlich im Webflow arbeiten. Es ist supereinfach. Okay, hier sind zum Beispiel die Nav- und die Fußzeile beide die alte Version. Okay? Jetzt können wir die neue Version hinzufügen. Okay, also füge das hier zusammen, los geht's. Oh, warte eine Sekunde. Es ist nicht vollständig da. Sie können sehen, dass es nicht mit dem Körper verbunden ist, los geht's. Jetzt ist es so. Das, das mit dem Körper verbunden ist, ziehen Sie es ganz nach unten. Achte darauf, dass es links ist. Da haben wir's. Perfekt. Also, wenn wir etwas an der NAF-Leiste auf der Startseite ändern , wird es sich überall auf der Website ändern, an jeder einzelnen Stelle auf der Website, wo sich diese spezielle NAF-Leiste befindet, es wird Okay, wir können uns diese Blog-Seite ansehen . Okay. Also, mit der Block-Seite , lass uns das etwas später machen , denn so kann ich dir das CMS zeigen. Also lass uns das etwas später machen. Kontaktieren Sie unsere Seite, das sollte ziemlich einfach sein. Auch hier können Sie die E-Mail-Adresse, die Telefonnummer und so weiter ändern . Ich werde nur die Farbe ändern und dir zeigen, wie man die Farbe ändert , weil das der schwierigste Teil ist. Natürlich weiß ich nicht, wie Ihre E-Mail-Adresse oder Telefonnummer lautet, also können Sie das ändern, wie Sie möchten. Aber ja, lass uns einfach die NAF-Leiste hier oben hinzufügen. Nochmals, ich stelle nur sicher, dass es mit dem Körper verbunden ist. Dann wählen wir das Futter aus. Okay. Perfekt. Ich meine, das ist jetzt so ziemlich erledigt. Das ist so gut wie fertig. Gehen wir nun zur Seite Über uns über uns über uns über uns über. Okay. Okay. Okay. Jetzt haben wir tatsächlich, lass uns diesen benutzen. Ich erstelle eine zweite Seite über uns. Und es war ziemlich ähnlich. Aber ich wollte nur ein paar andere Dinge hinzufügen , nur weil ich es nur ein bisschen anders machen wollte als die Startseite. Also ja, also habe ich die Struktur nur leicht geändert. Aber das ist so ziemlich genau dasselbe. Also werde ich genau das Gleiche tun. Es ist nur ein anderes Layout. Okay, lassen Sie uns dort eine nette, nette, bescheidene Überschrift hinzufügen . Und lassen Sie uns einige hinzufügen, von denen ich nicht weiß. Lass uns ein paar Bilder hinzufügen. Ich bin mir nicht sicher, welche Bilder wir verwenden sollen. Lass uns vielleicht diese hinzufügen. Nehmen wir vielleicht an, sie Fotografie oder so, und vielleicht sagen wir, dass sie, du weißt schon, ihre fotografischen Fähigkeiten unter Beweis stellt Fantastisch. Das sind genau wie Stockbilder von einer Website, die ich gefunden habe. Ich glaube, es war pixels.com, was ich bereits früher im Kurs erwähnt früher im Kurs erwähnt Und Sie können diese Elemente einfach löschen oder Text hinzufügen Es liegt natürlich ganz bei Ihnen. Ich zeige dir nur, eine vereinfachte Version dessen, was du tun kannst. Okay. Ich mache auch tolle Fotos von der Fotografie. Meine Arbeit. Da haben wir's. Dann können wir einfach ein bisschen schreiben. Aber die Sache ist zum Beispiel der Grund, warum es wirklich wichtig ist, dass wir Vorlagen verwenden und dort ein bisschen Rechtschreibung verwenden. Der Grund, warum wir Vorlagen verwenden und die Dinge auf diese Weise einrichten, ist, uns viel Zeit zu sparen und auch sicherzustellen, dass die Website responsiv ist. Diese Website wird also gut funktionieren, solange Sie die Vorlagen verwenden und Sie nicht zu viel an der Gestaltung ändern und Sie einfach entweder Dinge löschen oder, Sie wissen schon, den eigentlichen Text oder die Bilder ändern, alles wird perfekt formatiert sein. Es ist einfach die Art , wie sie gebaut sind. Also, hier siehst du zum Beispiel, du weißt schon, das kleine Ähm, du weißt schon, Öffnen und Schließen des FAQ-Bereichs. Es würde so lange dauern, das selbst zu erstellen. Wenn man es so hat, ist es buchstäblich viel einfacher, eine Website zu erstellen und eine gut aussehende Website zu erstellen, die tatsächlich funktioniert. Okay. hier unter dem FAQ-Bereich Lassen Sie uns in diesem kleinen Abschnitt hier unter dem FAQ-Bereich einfach hinzufügen, dass Sie bei mir buchen möchten. Ja, du kannst mich unten buchen. Ja, lass uns so etwas wie „Buche mich“ schreiben. Das ist Pink, schweben Sie drüber. Also, wenn du das ändern willst, dann geh einfach buchstäblich dorthin Trennschalter. Lass es uns ein bisschen leichter machen. Diese Kurve hier, also die Kurve, die ich Ihnen gerade gezeigt habe , ist im Grunde, solange Sie eine Farbe auf dieser Kurve wählen, passt sie zur Hauptfarbe, also zur dunkleren Farbe. Das ist ein kleiner Tipp für dich. Okay. Also die Navigationsleiste am Fuß wurde immer noch nicht geändert, also ändern wir das. Okay. Okay, da haben wir's. A Damit ist es nicht mit dem Körper verbunden. Es ist mit der Sektion verbunden. Also lass uns das ändern. Ist das, was jetzt mit dem Körper verbunden ist. Das ist gut. Fantastisch. Okay. Das ist in Ordnung. Das ist in Ordnung. Das sieht gut aus. Fantastisch. Okay, fangen wir an, uns die Blogartikel anzusehen. Ich denke, hier kann ich Ihnen zeigen, wie man das CMS benutzt. Dies wird das beste Beispiel dafür sein. Lassen Sie uns die Dinge einfach halten und einfach die geöffneten Tabs löschen. Sie können das hinzufügen, wenn Sie möchten, aber es ist ein bisschen komplizierter, aber ich möchte die Dinge vorerst nur so einfach wie möglich halten . Und wenn du möchtest, dass ich dem Kurs eine zusätzliche Lektion hinzufüge, dann schicke uns einfach eine E-Mail und wir können das arrangieren. Also füge ich nur einen Container hinzu. Und dann werde ich innerhalb des Containers eine CMS-Komponente hinzufügen, die ich Ihnen zeigen werde, sobald ich sie öffne und an der richtigen Stelle platziert habe. Da haben wir's. Du klickst einfach auf die kleine Plus-Schaltfläche und dann einfach auf die Sammlungsliste. So heißt es eigentlich, aber es ist im Grunde ein CMS-Element. Leg es in den Behälter. Dann muss die Quelle das CMS sein, eine Sammlung , okay, was ich dir gleich zeigen werde. Sie können hier sehen, dass es noch keine Artikel gibt, aber wir werden gleich einige Artikel hinzufügen. Okay? Also können wir das sehen, leerer Zustand. Also da ist nichts. Wir wollen, dass es in einem Grid ist. Also machen wir eine Sammelliste und drücken dann auf Raster. Das wird die Dinge auflockern und wir wollen, dass drei Spalten zu den folgenden Spalten passen. Okay. Also haben wir das da. Das ist perfekt. Jetzt müssen wir als Nächstes zur CMS-Einstellung gehen. Das ist also die Sammlung, die wir mit dem CMS eingerichtet haben , und wir werden einfach fünf hinzufügen. Das sind nur Modelle. Sie meinen es nicht ernst. Sie fügen fast nur Platzhalter hinzu. Also können wir diese hinzufügen. Lassen Sie uns nur ein paar zusammenfassen, um die Verwaltung ein bisschen zu vereinfachen. Und dann können wir eines nehmen und uns einfach ansehen, wie das Vorschaubild geändert Lassen Sie uns einfach das Vorschaubild in etwas ändern , das unserer Meinung nach etwas relevanter ist Da haben wir's. Das funktioniert. Und wir können einfach Block eins hinzufügen, perfekt. Dieser, lass uns ihn einfach auf Blog zwei ändern. Wir ändern das tatsächliche Okay, ändern das Bild. Und zu guter Letzt, Blog drei. Und Sie können hier sehen , dass es im CMS-Bereich viel einfacher ist, Dinge zu ändern, und dass es viel besser organisiert ist. Nun, das ist eigentlich ein bereits vorhandenes CMS-Setup für meine eigentliche Website, sodass ich Ihnen all die verschiedenen Details und so zeigen kann, und ich fange nicht einfach bei Null , sondern an, sondern Ihre wird viel einfacher und viel einfacher zu verwalten sein . Offensichtlich wird es für Sie einzigartig sein. Im Moment können Sie sehen, dass ich das Element gerade kopiert und eingefügt habe, die Elemente aus dem Design der vorherigen Vorlage Also, lass es mich dir zeigen. Okay. Lass mich einfach versuchen herauszufinden, warum ich das nicht einfügen kann. Okay. Fügen wir die Sammlungsliste wieder hinzu. Gehe zu Sammlungen blockieren. Perfekt. Und dann die Verpackung Das ist da. Lassen Sie uns das ein bisschen öffnen. Gegenstand der Sammlung. Da haben wir's. Jetzt haben wir das Element kopiert und eingefügt Also haben wir buchstäblich einfach eines dieser Elemente genommen und es einfach kopiert und eingefügt Also jetzt brauchen wir das eigentlich nicht mehr. Wir löschen es einfach. Das ist weg. Okay. Perfekt. Und die Sache mit dem Sammlungselement ist, wenn Sie etwas an einem ändern , ändert es sich an allen. Anstatt das Bild zu ersetzen, können wir einfach auf diese kleine lila Schaltfläche hier klicken diese kleine lila Schaltfläche hier und dann buchstäblich auf das Vorschaubild klicken, und es wird automatisch geändert Da haben wir's. Da haben wir's. Perfekt. Nun, aus irgendeinem Grund, das gibt uns ein bisschen Spielraum, also nimm die 13 weg, perfekt. Aus irgendeinem Grund hat sich das mittlere Bild nicht geändert, aber das werden wir später ändern, ein plötzliches Problem. Also ändern wir das in den Titel, siehe Block eins, Block zwei, Block drei. Wir können das ändern, wenn wir eins haben, können wir es mit dem CMS verbinden, aber für die Zwecke dieser Lektion sollten wir das nicht tun. Ändere das mit dem Inhalt. Und dann dafür. Auch hier, schauen Sie, wenn wir den Link ändern, verlinken Sie den aktuellen Blockabschnitt. Das ist was du willst. also den eigentlichen Titel und die Links in den einzelnen Sammlungselementen Sie möchten also den eigentlichen Titel und die Links in den einzelnen Sammlungselementen mit dem aktuellen Artikelabschnitt verknüpfen . Also schau hier. Dann aktuelle Blocksammlung, sorry. Da haben wir's. Dieses mittlere Bild wurde also nicht aktualisiert. Gehen wir also zurück zum CMS, Blocksammlung, Block zwei. Ah, ich habe nicht wirklich gespeichert. Deshalb. Okay, lass es uns ersetzen. Gehen wir rein und stellen wir sicher, dass es dieses Mal auch geladen wird. Scheint geladen zu sein, speichern wir es und dann überprüfen wir es. Stellen wir sicher, dass es aktualisiert wird. Funktioniert es? Da haben wir's. Fantastisch. Jetzt können wir 50 bis 1 Million hinzufügen, damit Sie das sehen können. Ich habe es bei einem einzigen Artikel zum Thema Mode geändert, und ich habe es buchstäblich bei allen anderen geändert. Das ist also für alles dasselbe. Sie können 1 Million verschiedene Artikel haben. Ich denke, es gibt eine unbegrenzte Anzahl von Artikeln, die Sie erstellen können, und es ändert sie so einfach. Du musst sie nicht einzeln ändern. Das ist die Stärke des CMS-Setups. Also, wir haben das jetzt eingerichtet. Lass uns einfach die Foer- und Nav-Leiste ändern, weil mich das nervt. Okay, da haben wir's. Lass uns einen kleinen Blick darauf werfen. bah, bah. Da haben wir's. Und lass uns das einfach ändern. Und natürlich kann das etwas länger als 45 Minuten dauern , aber ich zeige Ihnen nur, dass Sie, wenn Sie alle Ihre Bilder bereit haben und alles formatiert , wissen Sie, mit ein bisschen Übung, diese superschnell erledigen können Und es könnte beim ersten Mal etwas länger dauern , aber danach werden Sie überhaupt keine Zeit mehr brauchen Okay. Also ich meine, wir haben eine ziemlich starke Website hier eine ziemlich starke Website, warte, bis sie geladen ist. Aber weißt du, wir haben das buchstäblich innerhalb von 45 Minuten eingebaut . Die Website ist responsiv. Wissen Sie, wir haben 45 Minuten gebraucht, um diese Website zu erstellen, und ich meine wortwörtlich, Sie können das CMS übrigens auch hier hinzufügen. Sie können also genau dieselbe Funktion hinzufügen und sie auf drei beschränken, sodass Sie zum Beispiel einfach die neuesten Artikel anzeigen können. Ähm , ja, nur um dich darüber zu informieren , damit du das nicht manuell machen musst. Aber ich meine, die Website sieht insgesamt wirklich gut aus. Ich möchte Ihnen ein paar Dinge in Bezug auf die Einstellungen zeigen , bevor wir fertig , denn das wird uns nur helfen, alles zu beenden. Aber ja, ich meine, weißt du, in 45 Minuten haben wir es geschafft zu bauen, ich meine, wenn es ein bisschen schneller lädt, wäre das fantastisch, aber ich denke, mein Internet lief einfach ein bisschen langsam. Wissen Sie, wenn Sie eine Website erstellen können , die responsiv und in 45 Minuten einsatzbereit ist , können Sie sich nicht wirklich, Sie wissen schon, darüber beschweren. Wissen Sie? Es ist ziemlich genial. Die Tatsache, dass du das kannst. Okay, schauen wir uns das mal kurz an. Okay. Ich meine, alle Seiten sehen gut aus. Die statischen Seiten sind die wichtigsten Dinge. Also, weißt du, das ist zum Beispiel hier auf einer statischen Seite. Also das ist hier auf einer statischen Seite hier. Okay. Aber wenn Sie für den Artikel beispielsweise möchten, dass die Seite automatisch aufgefüllt wird, müssen Sie die eigentlichen CMS-Sammlungsseiten erstellen Hier ist ein Beispiel für eine für die Lancaster Academy-Website Wenn ich also zum Beispiel ein CMS-Element oder einen CMS-Artikel erstelle, es automatisch auf der eigentlichen Seite aufgefüllt , und es wird eine separate Seite erstellt, ohne eine zusätzliche Seite zu erstellen, falls das Sinn macht Sie würden also einfach hier klicken. Ich glaube nicht, dass ich zu viele habe, also wird es mir nicht möglich sein, ich müsste meinen Plan grundsätzlich aktualisieren, aber der CMS-Plan ist perfekt. Lassen Sie uns Ihnen also einfach einen Einblick in die Blog-Sammlungen geben. Sie können hier also sehen, dass ich tonnenweise verschiedene Elemente habe. Entschuldigung, ich habe mich gerade gehackt. Ich habe tonnenweise verschiedene Elemente wie Rich-Text, Bild-Link Das sind die wichtigsten , die Sie verwenden werden: Klartext, Rich-Text, Bild, Videolink und Link. Sie werden nicht wirklich viel anderes verwenden, aber Sie können andere Dinge verwenden, wenn Sie möchten. Erstellen Sie einfach die Dinge, die Sie benötigen und die Sie benötigen, üblicherweise auf jeder einzelnen Seite. Dann erstelle sie einfach. Es ist wirklich, wirklich einfach, wirklich, wirklich einfach. Okay. Schauen wir uns jetzt einige Einstellungen an. Gehen wir zur Leiste mit den Seiteneinstellungen. Das Erste, was wir kurz bevor wir fertig sind, erwähnen sollten , sind das Favicon und der Webclip Das muss also 32 mal 32 Pixel groß sein, und das wissen Sie letztendlich jedes Mal, wenn jemand Ihre Website besucht, im Tab Der Webclip muss 256 mal 256 Pixel groß sein. Was die Tarife angeht, können Sie einfach den Starterplan nutzen , der kostenlos ist, aber Sie können keine benutzerdefinierte Domain verbinden. der CMS-Option können Sie das CMS tatsächlich einrichten, was wiederum sehr hilfreich ist. Ich würde es also wirklich empfehlen, wenn Sie das Geld haben , um darin zu investieren. Und es gibt Ihnen auch eine benutzerdefinierte Domain, was großartig ist. Die Basisoption gibt Ihnen im Grunde die Möglichkeit, die Domain zu verbinden, und sie bietet Ihnen ein etwas schnelleres Hosting, aber nicht die CMS-Option. Und sobald Sie einen Plan haben, entweder die Basis - oder die CMS-Option, können Sie Ihre Domain hinzufügen, die Sie gerade dort gesehen haben. Die Formularoption, also stellen Sie sicher , dass Sie hier Ihre E-Mail-Adresse hinzufügen. Hier werde ich Sie dort kontaktieren, wenn jemand wegen Ihres DS-Kontaktformulars oder etwas anderem Kontakt mit Ihnen aufnimmt Ihres DS-Kontaktformulars oder etwas anderem , aber wenn Sie fertig sind, veröffentlichen Sie es einfach und Ihre Website ist fertig. Es ist alles erledigt. Ja, gute Arbeit. Okay. Wir sehen uns in der nächsten Lektion, aber ja, vielen Dank, dass Sie mir die Zeit gegeben haben, das mit Ihnen durchzugehen, und ich wünsche Ihnen einen schönen Tag. Wir sehen uns bald. 66. Website-Launch: Deine Website auf Googles Seite #1 erhalten: Wie können Sie Ihre Website vorbereiten und so schnell wie möglich auf die erste Seite von Google gelangen ? Nun, es gibt einige wichtige Dinge Sie beachten müssen, wenn Sie Ihre Website tatsächlich so fertig stellen. In dieser Lektion werden wir sie alle behandeln. Das Erste, was Sie jetzt einrichten müssen, sind Ihre Keywords. Jetzt sind Ihre Keywords im Wesentlichen die Wörter, mit denen Sie für Ihre Marke in Verbindung gebracht werden können mit denen Sie für Ihre Marke in Verbindung gebracht und die Sie tatsächlich anbieten können. Sie sind einzigartig und unverwechselbar für Ihre spezifische Marke. Gehen Sie im Grunde zum Google Keyword Planner und suchen Sie dann nach relevanten Suchbegriffen , die jemand in das neue Google eingeben würde , um Ihre Marke zu finden. Denken Sie grundsätzlich über die Wörter nach, mit denen Sie für Ihre Marke in Verbindung gebracht werden möchten . Überprüfen Sie dann den Google-Keyword-Planer um sicherzustellen, dass das Suchvolumen ausreicht . Dies bedeutet im Grunde, dass tatsächlich genügend Personen nach diesem bestimmten Begriff oder Wort suchen , sodass Sie sicherstellen können, dass genügend Personen nach diesem Begriff suchen , um Sie bei Google zu finden. Eine weitere Sache, die Sie überprüfen sollten, ist herauszufinden, welche Begriffe und Keywords die geringste Konkurrenz haben. Der Trick dabei besteht darin, sicherzustellen , dass der Suchbegriff, für den Sie bekannt sind, so einzigartig wie möglich ist. Wenn jemand tatsächlich bei Google danach sucht, ist es daher Google danach sucht, ist es wahrscheinlicher, dass Sie auftauchen. Jetzt sind Keywords nicht die einzigen Dinge, die Sie benötigen, um bei Google gefunden zu werden. Eine andere Sache, die Sie wirklich einrichten müssen ist On-Page-SEO. Dies bedeutet im Grunde, sicherzustellen, dass Ihre Überschriften und Unterüberschriften alle für die Art der von Ihnen angebotenen Sache relevant sind. Dies hilft Kunden dabei, Ihre Produkte tatsächlich online zu finden, und stellt außerdem sicher, dass beim Hinzufügen von Bildern zu Ihrer Website darauf geachtet wird Ihre Produkte tatsächlich online zu finden, und stellt außerdem sicher, dass beim , dass ihnen ein beschreibender Text beigefügt ist, damit Google tatsächlich erkennen kann, worum Google tatsächlich erkennen kann es bei dem Bild geht und wofür es relevant ist Stellen Sie außerdem sicher, dass alle Ihre URLs schön, sauber und präzise sind Machen Sie Ihre URL beispielsweise nicht zu lang und fügen Sie unnötigen Wörter hinzu, da Google nicht weiß, was mit Ihrer URL geschehen soll, und Sie werden in absehbarer Zeit nicht auf der ersten Seite gefunden werden Eine weitere Sache, die für SEO und dafür, bei Google gefunden zu werden, wirklich wichtig ist, sind qualitativ hochwertige Inhalte. Dies ist tatsächlich einer der Ansätze, die ich persönlich für jedes einzelne meiner Unternehmen gewählt habe , um sicherzustellen, dass die Leute meine Website finden und letztendlich meine Produkte und Dienstleistungen kaufen. Wenn es um qualitativ hochwertige Inhalte geht, bedeutet dies im Wesentlichen, Blogbeiträge zu schreiben oder vielleicht Videos zu posten, um die Nutzer auf Ihrer Website zu halten. Google kümmert sich beim Ranking Ihrer Website um zwei einfache Dinge . Erstens, wie lange der Nutzer auf Ihrer Website verbringt. Denn je länger jemand auf Ihrer Website verbringt, zeigt Google, dass die Qualität des Inhalts viel höher ist und auch die Relevanz des Inhalts für das, und auch die Relevanz des wonach die Person sucht Und diese beiden arbeiten Hand in Hand, um Google mitzuteilen, dass wenn jemand nach diesem bestimmten Suchbegriff sucht Sie ihm diese Seite zeigen, er zufrieden sein und die Antworten erhalten wird, nach denen er sucht Google ist im Wesentlichen darum bemüht, der Person so schnell wie möglich das zu geben , was sie braucht, und zwar auf die beste Weise. Wenn Sie dieses Problem also tatsächlich lösen und ihnen das Beste geben können , werden sie letztendlich mehr Zeit auf Ihrer Website verbringen, und Google wird zu Ihren Gunsten arbeiten und Sie an den Anfang der ersten Seite bringen. Eine weitere Sache, die Sie beachten sollten, ist die Seitengeschwindigkeit. Jetzt können Sie buchstäblich Online-Tools finden, mit denen Sie die Geschwindigkeit Ihrer Website überprüfen können, indem Sie einfach googeln, meine Website-Seite überprüfen und dann einfach Ihre URL hinzufügen Das ist also sehr einfach zu überprüfen, aber stellen Sie sicher, dass Ihre Website so schnell wie möglich ist Das bedeutet, dass Sie Ihrer Startseite keine wirklich langen, tiefen und großen Dateien als Videos hinzufügen , da dies letztendlich die Absprungrate erhöht Und wenn ich Absprungrate sage, meine ich im Grunde Leute, die auf Ihre Website kommen und sie dann sofort wieder verlassen, wenn Ihre Website nicht Sie also einfach sicher, dass Ihre Website wirklich schnell geladen wird. Dadurch können die Nutzer dorthin gelangen, wo sie sein müssen, und mehr Zeit auf Ihrer Website verbringen, weil dies ein besseres Erlebnis bietet Eine weitere Sache, auf die Sie achten müssen , ist die Benutzererfahrung. Wir haben dies bereits zu Beginn des Kurses behandelt, aber es ist wirklich wichtig, sicherzustellen, dass der Kunde oder die Person in schönen, leicht verständlichen Schritten dorthin gelangen kann, wo sie sein möchten . Das bedeutet, dass sie nicht frustriert sind und die Website nicht abhaken und mehr Zeit dort verbringen, was Google zeigt, dass Ihre Website von hoher Qualität ist, sie eine bessere Chance hat, einen hohen Rang zu Nun, ein paar andere Dinge, die für Ihre Website wirklich wichtig sind , sind interne Verlinkungen und Backlinks Beim internen Verlinken haben Sie viele verschiedene Blogbeiträge, die alle miteinander verknüpft sind, um letztendlich ein Netzwerk von Blogbeiträgen aufzubauen, die sich haben Sie viele verschiedene Blogbeiträge, die alle miteinander verknüpft sind, um letztendlich ein Netzwerk von Blogbeiträgen aufzubauen alle gut ergänzen In einem Blogbeitrag könnten Sie beispielsweise über dasselbe Thema sprechen, zu dem Sie bereits einen anderen Blogbeitrag geschrieben haben, sodass Sie auf diesen Blogbeitrag verlinken könnten, um die Leute länger auf Ihrer Website zu halten Jetzt sind Backlinks etwas anders. Backlinks sind im Wesentlichen Links von anderen Websites, die Google bereits kennt und denen Google vertraut Wenn Sie zum Beispiel ein brandneues Unternehmen wären und gerade eine Website von Grund auf neu erstellen, könnten Sie sich jederzeit an verschiedene Websites wenden, die sich in Ihrer Nische befinden, um letztendlich Backlinks von Ihren letztendlich Backlinks von Website-Seiten zu ihren und umgekehrt zu erstellen, um im Grunde den Traffic zu teilen und in der Zwischenzeit auch ein gewisses Vertrauen zu Goole aufzubauen Nun, ich weiß, dass das eine Menge zu verkraften ist. Aber was ich persönlich tun würde, wenn Sie sich ein wenig überfordert fühlen, ist, sich einfach darauf zu konzentrieren, qualitativ hochwertige Inhalte und Blogbeiträge auf Ihrer Website zu erstellen und Blogbeiträge auf Ihrer Website Das habe ich persönlich für jedes meiner Online-Unternehmen getan und es funktioniert sehr gut Einfach weil, wenn jemand auf Ihre Website kommt und sagt, dass Sie dort viele hochwertige Inhalte haben, er Ihnen tendenziell viel mehr vertraut. Und wenn sie mehr Zeit auf Ihrer Website verbringen, vertraut Google Ihnen letztendlich auch viel mehr Wie dem auch sei, ich weiß, dass dies kein SEO-Kurs ist, und wir werden vielleicht in Zukunft den 1. Mai haben, aber in diesem Fall wollten wir Ihnen nur einen kurzen Überblick über die Dinge geben , an die Sie denken können wenn Sie die Suchmaschinenoptimierung und Ihre digitale Präsenz für Ihre Website aufbauen Ihre digitale Präsenz für Ihre Website Wenn Sie jedoch Fragen zur Suchmaschinenoptimierung haben , können Sie sich gerne an uns wenden. Ich freue mich sehr, Sie so gut wie möglich zu unterstützen. Aber davon abgesehen sehe ich dich in der nächsten Lektion. Wir sehen uns bald. 67. Website-Launch: Eine großartige Domain für deine Website sichern: Warum ist es heutzutage so schwierig, eine großartige Domain für Ihre Website zu finden ? Nun, letztendlich, nur um Ihnen eine kleine Hintergrundgeschichte zu geben, haben die Leute in den letzten Jahren angefangen, Domains zu kaufen und sie dann gegen eine Prämie zu verkaufen Wenn also zum Beispiel jemand auf eine Domain für 20$ gestoßen ist, was im Allgemeinen so viel kostet, wie viel eine Domain kosten sollte, und er möchte sie nicht persönlich nutzen, sieht sie aber als eine Domain, die jemand anderes möglicherweise für ein Unternehmen oder für ein Projekt verwenden könnte ein Unternehmen oder für Im Grunde genommen kaufen sie die Domain für 20$ und zahlen 20$ pro Jahr, um sie zu behalten Und wenn dann jemand anderes auf diese Domain stößt und danach sucht, wird er sie online gegen eine Prämie für vielleicht vier oder mindestens 5.000$ anbieten Nun, ich denke, das ist eines der schlimmsten Dinge an der Domain-Branche Ich arbeite tatsächlich mit vielen Unternehmen zusammen, um ihnen zu helfen, den perfekten Markennamen aman zu finden. Eines der Dinge, die sich viele Unternehmen wünschen, ist eine große Nachfrage nach ihrer Website. Nun, um ganz ehrlich zu sein Wenn Sie nach einem Markennamen suchen, weniger als sechs Buchstaben hat , wird es sehr, sehr schwierig sein, eine Domain mit 2 bis 5 Buchstaben zu finden, die verfügbar ist, und vor allem, Kosten geht, für weniger als eine sehr hohe wenn es um die Kosten geht, für weniger als eine sehr hohe Zahl Und das ist nicht nur verfügbar, sondern es wird Sie wahrscheinlich einen Haufen Geld kosten , wenn Sie es tatsächlich kaufen wollen Machen Sie sich jetzt keine Sorgen. Wir haben tatsächlich ein paar wirklich interessante Tricks, mit denen Sie im Grunde eine Domain bekommen können im Grunde eine Domain bekommen können, die für Ihr Unternehmen sehr wertvoll ist und Ihnen auch eine Menge Geld spart. Möglicherweise haben Sie Ihren Markennamen bereits eingerichtet. Und wenn Sie sich ganz auf Ihren Markennamen festgelegt haben, eine gute Methode, die wir bei Kunden immer wieder anwenden , darin, ein relevantes Wort hinzuzufügen. Wenn Sie zum Beispiel in einem E-Commerce-Geschäft sind, könnten Sie beispielsweise etwas wie ein Geschäft hinzufügen, oder Sie könnten sogar vor dem eigentlichen Markennamen einen Shop hinzufügen. Wenn dein Markenname zum Beispiel Nike wäre, dann könnte es shop nike.com sein Oder Sie könnten am Ende immer Shop hinzufügen, was im Wesentlichen nike store.com ist, oder wenn Sie beispielsweise eine Agentur sind, könnten Sie das Wort Agentur auch immer in Ihrer Domain verwenden in Ihrer Domain Im Grunde müssen Sie nur sicherstellen , dass das Wort, das Sie hinzufügen, relevant für das ist was Sie beide jetzt verkaufen und auch für das, was Sie in Zukunft verkaufen könnten Und tatsächlich gibt es viele Unternehmen, die, wenn Sie sich die saubere.com-Domain nicht leisten können, also nur Ihre Marke auf der.com in der Anfangsphase Ihres Geschäftsaufbaus , viele Unternehmen, darunter Facebook ganz am Anfang, durch eine Domain, die im Grunde nur eine 20-Dollar-Domain mit einem zusätzlichen Wort darin ist , aber später, wenn das Geschäft super profitabel ist, Sie kaufen die Claim.com-Domain , weil sie die Mittel dafür haben Das ist also der erste Ansatz, relevant ist Ihrem Domainnamen im Grunde ein einfaches Wort hinzufügen, das für das, was Sie tun und was Sie anbieten, Wenn dieser Ansatz für Sie nicht funktioniert, können Sie jederzeit einfach eine Prämie zahlen. Jetzt können Sie manchmal verhandeln und ein wirklich gutes Angebot für Ihren Domainnamen bekommen . Und letztendlich ist die Person, die diese Verhandlung gewinnt , diejenige, die sich am wenigsten darum kümmert. Wenn Sie also einen Backup-Plan wie das Hinzufügen eines Wortes haben und jemandem wirklich gutes Geld anbieten, der diese Domain schon ziemlich lange hält, könnten Sie es zu einem ziemlich guten Preis bekommen. Nun, natürlich wird nicht jede Person , die eine Domain verkauft, gleich sein, also wird jemand mehr Raum Verhandlungen haben und andere, naja , nicht so sehr. Aber alles, was Sie tun können, ist einfach nachzufragen und die Frage zu stellen, und wenn sie mit einem lächerlichen Preis zurückkommen, ist es wahrscheinlich am besten, sich andere Optionen anzusehen Nun, ein weiterer wirklich cleverer Weg, eine wirklich großartige.com-Domain zu bekommen , besteht darin , die Schreibweise zu ändern Zum Beispiel hatten wir vor einiger Zeit eine Marke namens Spruce, mit der wir vor einiger Zeit zusammengearbeitet haben , aber anstatt die übliche Schreibweise von SPUCE zu verwenden, haben wir das C in ein S geändert, was immer noch wie Fichte rüberkam, aber im Wesentlichen viel aber anstatt die übliche Schreibweise von SPUCE zu verwenden, haben wir das C in ein S geändert, was immer noch wie Fichte rüberkam, unverwechselbarer war Es war besser für die Suchmaschinenoptimierung und es half uns auch, eine Claim.com-Domain zu bekommen, die Das ist eigentlich fast unerhört wenn es darum geht, Domains mit fünf Buchstaben zu finden, und das sah großartig aus Aber wir haben es geschafft, es zu finden, und wir hatten einfach großes Glück. Schauen Sie sich das gerne an, wenn Sie wirklich möchten, und versuchen Sie, diesen Ansatz zu verwenden , um zu sehen, wie viel Glück Sie haben wenn es darum geht, Ihre Domain zu finden. Wenn Sie nun die Schreibweise des Namens nicht ändern möchten , möchten Sie keine Prämie zahlen und Sie möchten auch kein Wort hinzufügen. Es besteht immer die Möglichkeit die Erweiterung am Ende zu ändern. Nun, die meisten Leute wollen eine.com-Domain ganz ehrlich ist, aber es ist nicht die einzige Domain, die es gibt. Es gibt viele andere Optionen. Wenn Sie beispielsweise in England oder Frankreich ansässig sind, können Sie in Großbritannien den Punkt oder in Großbritannien den Buchstaben do fr verwenden, was für Großbritannien den Punkt oder in Großbritannien den Buchstaben do fr verwenden, Ihren speziellen geografischen Standort relevant ist. Dies ist möglicherweise nicht die beste Option für jemanden, der international Geschäfte tätigen möchte international Geschäfte tätigen möchte , z. B. mit einer Handelsmarke. Wenn Sie sich nur lokal konzentrieren möchten, könnte dies eine großartige Option für Sie sein. Wenn keine dieser Optionen funktioniert und Sie sich nicht einmal sicher sind, und Sie sich nicht einmal sicher sind Domainnamen Sie verwenden möchten , oder den Markennamen, den Sie haben, dann könnte es sich lohnen einen ganz anderen Markennamen auszuprobieren. In den letzten Jahrzehnten haben sowohl ich als auch mein Team von der Agentur Clement Tn House Brand Tausenden von verschiedenen Unternehmern geholfen mithilfe unseres einzigartigen Ansatzes zur Markenbenennung den perfekten Markennamen für ihr Unternehmen zu finden den perfekten Markennamen für ihr Unternehmen Jetzt haben wir leider bis 2025 furchtbar ausgebucht. Wir haben unseren Prozess jedoch als Online-Kurs festgelegt , den Sie finden sollten, wenn Sie sich unser Profil ansehen Schauen Sie sich das also unbedingt an, und das könnte Ihnen tatsächlich helfen, einen unglaublichen Markennamen für Ihr Unternehmen zu finden . Ich hoffe wirklich, dass diese Lektion Ihnen geholfen hat zu verstehen, wie vielleicht einen wirklich guten Domainnamen für Ihre Marke bekommen können. Wenn Sie darüber hinaus Fragen haben, lassen Sie mich bitte wissen, dass ich hier bin, um Sie zu unterstützen und Ihnen so gut wie möglich zu helfen. Aber ich kann es kaum erwarten, dich in der nächsten Lektion zu sehen. Also werde ich dich dort sehen. 68. Website-Launch: Deiner Website eine benutzerdefinierte Domain hinzufügen: Wie fügen Sie Ihrer Webfloor-Website eine benutzerdefinierte Domain hinzu? Nun, es ist eigentlich ganz einfach. Lassen Sie uns also eintauchen und ich zeige Ihnen, wie es geht. Der erste Schritt besteht also darin, tatsächlich auf Ihre Website zu kommen. Nun, das ist offensichtlich die Website der Lancaster Academy of Design and Brand Und wenn wir hier zu diesem Abschnitt gehen, sehen Sie eine kleine Schaltfläche namens Site Settings. Da wollen wir also hin. Wenn Sie nun auf Seiteneinstellungen klicken, werden Sie zu dieser Seite weitergeleitet , sodass Sie nur noch auf Veröffentlichen klicken müssen. Und Sie befinden sich hier, wo Sie unten die Produktion und Ihre benutzerdefinierten Domains sehen . Wie Sie hier sehen können, habe ich bereits benutzerdefinierte Domains an meine Website angehängt. Aber wenn Sie einfach über diesen Domains nachschauen, sehen Sie eine kleine Schaltfläche mit der Aufschrift Benutzerdefinierte Domain hinzufügen. nach ist der beste Weg, eine benutzerdefinierte Domain hinzuzufügen Meiner Erfahrung nach ist der beste Weg, eine benutzerdefinierte Domain hinzuzufügen, wenn Sie Ihre Domain beispielsweise entweder mit Go Daddy oder Google Domains haben entweder mit Go Daddy oder Google Domains , einfach die Quick Connect-Domain auszuwählen. Denn damit wird im Wesentlichen ein Schnellauswahlverfahren eröffnet , bei dem Sie letztendlich damit beginnen können , Ihre Domains oder den WWW-Punkt domain.com hinzuzufügen oder den WWW-Punkt domain.com Tatsächlich wird auch der WWW-Punkt entfernt, und dann klicken Sie auf Weiter Anschließend wird die Domain analysiert, der DNS-Anbieter erkannt und dann werden wir auch mit der eigentlichen Einrichtung der Details beginnen . Jetzt muss ich diese Domain natürlich nicht mit dieser speziellen Website verbinden . Sobald Sie Ihre Domain mit diesem Ansatz verbunden haben, ist es wirklich einfach, Ihre Domain zu veröffentlichen. Jetzt dauert es manchmal etwas länger, die DNS-Einstellungen mit Ihrer Domain erstellt wurden. Stellen Sie eine Verbindung mit der Webflow-Plattform her, und das kann zwischen einigen Stunden und 48 Stunden dauern. Aber sobald es erfolgreich verknüpft wurde und alles perfekt ist, wird es neben jeder der Domains als verbunden angezeigt. Und an diesem Punkt müssen Sie nur noch Ihre Domain veröffentlichen, noch Ihre Domain veröffentlichen, indem Sie hier auf diese Schaltfläche klicken und dann Zwei ausgewählte Domains veröffentlichen klicken. Wenn wir jetzt auf eine andere Website gehen, möchte ich Ihnen nur zeigen, wie es aussieht , wenn Sie nicht sofort eine Domain an Ihre Website angehängt haben . Das sagt mir im Grunde, dass ich, wenn ich eine benutzerdefinierte Domain hinzufügen möchte, einen gepaarten Website-Tarif hinzufügen muss. In einer früheren Lektion habe ich Ihnen die verschiedenen Website-Pläne gezeigt, und das sollte Ihnen letztendlich helfen, die beste Entscheidung zu treffen, basierend auf dem, was für Sie am besten ist. Aber letztendlich muss ich in dieser Situation auf diese Schaltfläche klicken und dann einen Website-Tarif auswählen , der meinen persönlichen Bedürfnissen am besten entspricht. Um den Startplan noch einmal zusammenzufassen : Sie können diesem speziellen Plan kein benutzerdefiniertes De Me hinzufügen Nun, der Basisplan ist für Sie, wenn Sie keine Art von Blog oder CMS-Funktion hinzufügen müssen Art von Blog oder CMS-Funktion hinzufügen Wenn Sie jedoch einen Blog hinzufügen müssen und Ihrer Website tatsächlich Inhalte hinzufügen möchten , wählen Sie die CMS-Funktion, da diese am beliebtesten ist, weil sie einfach die beste ist. Entscheiden Sie sich für die CMS-Option für jede einzelne meiner Websites, und ich zahle immer jährlich, nur weil hilft, ein bisschen Geld zu sparen. Wenn Sie eine E-Commerce-Marke sind, müssen Sie natürlich sicherstellen, dass Sie eine E-Commerce-Website auswählen, und in der Regel ist der Standard für Sie mehr als ausreichend. Sobald Sie also einen Plan ausgewählt haben, der für Sie am besten geeignet ist , zahlen Sie einfach dafür. Und wenn Sie dann zur Seite zurückkehren, sollten Sie in der Lage sein, Ihre benutzerdefinierte Domain mithilfe der Technik zu verbinden Ihre benutzerdefinierte Domain mithilfe , die ich Ihnen zuvor in dieser Lektion gezeigt habe. Wie dem auch sei, wenn Sie Fragen oder Ähnliches zur Verbindung Ihrer Domain haben, lassen Sie es mich bitte wissen. Ich versuche gerne, so viel wie möglich zu helfen. Abgesehen davon hoffe ich, dass diese Lektion hilfreich war, und wir sehen uns in der nächsten. 69. Nach dem Starten: Hotjar installieren: Was ist Hot Jar? Wie kann es Ihnen helfen, Ihre Website im Laufe der Zeit zu verbessern und letztendlich eine bessere Leistung Ihrer Website zu erzielen? Und wie installiert man es? Nun, Hotjar ist letztendlich eine Software, mit der Sie genau verfolgen können , was Ihre Website-Besucher tun, wenn sie Ihre Website besuchen Mithilfe der Hotjar-Plattform können Sie buchstäblich jede einzelne Mausbewegung verfolgen, können Sie buchstäblich jede die jemand beim Besuch Ihrer Website macht , um sicherzustellen, dass Sie wissen, dass Ihre Website funktioniert und das tut, was sie soll Denn wie Sie hier sehen können, habe ich buchstäblich Hunderte von Aufzeichnungen von Menschen auf der ganzen Welt , die meine Website gefunden haben und letztendlich Aufzeichnungen hinterlassen , damit ich genau sehen kann , was sie auf der Website gemacht haben, warum sie sie besucht haben und auch, warum sie nicht gekauft haben, wenn ich versuche, ihnen etwas zu verkaufen. Dies hilft Ihnen im Grunde dabei, genau herauszufinden , was auf Ihrer Website passiert , ohne Vermutungen anzustellen und sich zu fragen, ob Sie Recht oder Unrecht Weil Sie tatsächlich die Mausbewegungen sehen können, die die Person auf Ihrer Website macht Sie können sehen, worauf sie klicken, worüber sie zögern, was sie nicht Vielleicht sollte das so sein, wenn ein Button nicht funktioniert. Sie können buchstäblich alles sehen, und Sie können Dinge im Laufe der Zeit verfeinern und perfektionieren. Das Beste an der Software ist, dass sie absolut kostenlos ist und Sie bis zu einer bestimmten Anzahl von Website-Besuchern keinen einzigen Cent dafür bezahlen müssen . Sobald Ihre Website sehr stark ausgelastet ist, können Sie im Grunde genommen 100 tägliche Sitzungen anstelle von nur 35 Sitzungen durchführen. Aber ich persönlich finde, dass 35 für mich völlig ausreichend sind. Es hilft mir einfach, jeden Tag ein paar Sitzungen zu sehen und meine Website auf der Grundlage dieser Sitzungen zu verfeinern . nicht das Bedürfnis, auf 100 Abschnitte oder gar 500 Abschnitte umzusteigen , weil ich der Meinung bin, dass es sich für mich persönlich nicht lohnt. Und ich würde Ihnen auch nicht empfehlen, das zu tun, bis Ihre Website eine große Menge an Traffic erhält. Wir kennen also natürlich die Vorteile, die daraus ergeben können , die Leistung und das Verhalten jedes einzelnen Website-Besuchers auf Ihrer Website zu verfolgen. Sie können Ihnen helfen, Herausforderungen zu meistern und Ihre Website einfacher und viel schneller zu verfeinern . Wie installieren Sie Hotjar also eigentlich auf Ihrer Website? Jetzt, wo Webflow und Hot Jar so mühelos zusammenarbeiten, ist es sehr einfach, und ich zeige Ihnen in diesem Video, wie das geht Jetzt müssen Sie als Erstes ein Asset auf Hotjar erstellen Wenn Sie also hierher gehen und auf Neue Website hinzufügen klicken, können Sie einfach das APA hinzufügen und eine neue Scott Limited-Anzeigenorganisation hinzufügen neue Scott Limited-Anzeigenorganisation Letztlich würden Sie dann den Namen hinzufügen , der beispielsweise scotlncaster.com lautet URL der Website. Lass uns einfach genau das Gleiche verwenden. Lassen Sie uns im Industriesektor den Handel einschränken. Ich erkläre hiermit, dass mir diese Site Ad Site gehört. Stellen Sie nun sicher, dass Sie den Link tatsächlich kopieren und in diesen Abschnitt einfügen da es ihm aus irgendeinem Grund nicht gefällt, wenn Sie das HTTPS nicht davor setzen. Klicken Sie dann einfach auf Website hinzufügen. Und dann werden Sie im Grunde auf diese Seite weitergeleitet , auf der ich natürlich viele verschiedene Websites habe , die ich mit meiner Branding-Agentur gleichzeitig verwalte. Sie an dieser Stelle einfach Gehen Sie an dieser Stelle einfach zu diesem speziellen Abschnitt, Ihre Website relevant ist , und klicken Sie auf Tracking-Code installieren. Das mag ein bisschen beängstigend erscheinen, aber es ist wirklich einfach. Vertrauen Sie mir, lassen Sie uns Schritt für Schritt vorgehen. Wenn wir nun auf Tracking-Code installieren klicken , wird dieser Code hier angezeigt. Sie wissen nichts über den Code, um ihn auf Ihrer Website zu installieren , und ich zeige Ihnen genau, wie das geht. Alles was Sie tun müssen, ist zu dieser oberen Schaltfläche hier zu gehen und auf Code kopieren zu klicken. Sobald dies kopiert ist, gehen Sie einfach zu Ihrer Webflow-Website und klicken Sie auf Seiteneinstellungen. Wenn Sie dann hierher kommen, klicken Sie einfach auf benutzerdefinierten Code. Denken Sie daran, dass wir hier nicht programmieren, sondern nur kopieren und einfügen. Es ist dasselbe wie das Kopieren und Einfügen von Text in ein Word-Dokument, und es ist sehr einfach, machen Sie sich keine Sorgen Sobald Sie zu diesem Abschnitt gekommen sind, werden Sie den Kopfcode und den Fotocode haben Jetzt befindet sich der Kopfcode , den Sie benötigen Stelle, an der Sie den Text einfügen möchten Jetzt werden Sie hier sehen, dass ich diesen Text tatsächlich hier eingefügt habe diesen Text tatsächlich hier eingefügt Nun, das ist genau derselbe Text, den ich auf Hot Jar habe. Es heißt wörtlich Hot Jar und es endet mit dem Drehbuch. Nun, wenn Sie das hinzufügen, ist das offensichtlich das für Lancaster Academy of Design and Brand, was ein bisschen anders ist, weil es tatsächlich den anderen Firmennamen hat und offensichtlich ein anderer Code dahinter steckt Aber es ist genau dasselbe. Alles was ich getan habe, war Code kopieren zu drücken und ihn dann in den Kopf des Codes einzufügen. Und wenn Sie das getan haben, müssen Sie nur noch auf Veröffentlichen klicken und dann zu Hot Jar zurückkehren, Installation zu überprüfen. Und wenn Sie die Installation verifizieren , erhalten Sie einen grünen Eindruck und Sie wissen, dass Hotjar und Webflow zusammenarbeiten, um die Besucher Ihrer Website zu verfolgen Wann immer du dann irgendwelche Aufzeichnungen von deiner Website sehen willst , gehst du einfach zu hot jar.com und schaust sie dir an, weil sie alle gut für dich organisiert sind und du sie sehen und überprüfen und recherchieren kannst , um deine Website im Laufe der Zeit zu verbessern. Ich überprüfe tatsächlich jeden Monat meine Hot-Jar-Daten um einfach zu sehen, warum Leute auf meine Website kommen, was sie auf meiner Website tun, ob es etwas gibt, das verbessert werden kann. Dann blockiere ich den ganzen Monat über Zeit , um die Website grundsätzlich zu verbessern, sodass meine Website mit der Zeit immer besser wird . Ich mache das immer am ersten oder jeden Monat, nur um sicherzugehen, dass ich den Überblick behalte und dass meine Websites einwandfrei funktionieren. Wenn Sie Fragen zu Hot Job haben , lassen Sie es mich bitte wissen. Ich bin immer für Sie da, um Sie zu unterstützen und zu helfen, aber das sollte ziemlich einfach sein, und ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Wir sehen uns bald. 70. Nach dem Launch: Eine Website-Marketing-Strategie erstellen: Okay, Sie haben also eine unglaubliche Website für Ihr Unternehmen erstellt . Also, wie fängt man eigentlich an, dort Traffic zu bekommen? Damit die Leute tatsächlich bei Ihnen kaufen und mehr darüber erfahren können , was Sie zu bieten haben? Jetzt kommt es auf den Webseiten-Traffic und die Entwicklung einer Marketingstrategie an, die Ihnen helfen kann, relevanten Webseiten-Traffic auf Ihre Website zu lenken , damit die Leute herausfinden können , wer Sie sind und wie Sie helfen können. Natürlich ist dies ein Kurs zur Website-Entwicklung, der Ihnen hilft, eine fantastische Website zu erstellen, die Ihre Marke perfekt repräsentiert. Wenn Sie jedoch der Meinung sind, dass es für Sie nützlich wäre, zu lernen , wie Sie eine umsetzbare Marketingstrategie für Ihre Marke entwickeln können, um relevanten Traffic auf Ihre Website zu lenken und letztendlich mehr Kunden zu gewinnen und mehr Umsatz und Umsatz zu erzielen, dann könnte der nächste Kurs im Brand Builder P-Programm genau das sein, wonach Sie suchen Und im Rahmen dieses Kurses helfen wir Ihnen dabei, Ihre Geschäfts- und Marketingziele festzulegen , und helfen Ihnen dann, diese Ziele zu erreichen, unabhängig davon, ob Sie das größte Budget der Welt haben. Kein Budget. Letztlich wollten wir jedem einzelnen Unternehmer, egal wie viel Geld er hatte, die Blaupause geben egal wie viel Geld er hatte , um ihm zu helfen, sein Marketing perfekt zu machen Und in diesem Kurs behandeln wir den Marketing-Funnel , den im Grunde jedes einzelne Unternehmen nutzt, um Kunden für seine Marke zu Das ist ein vierstufiger Prozess, und alles beginnt mit der Sensibilisierung Letztlich besteht der erste Schritt , um jemanden dazu zu bringen, tatsächlich bei Ihnen zu kaufen , darin, ihn darauf aufmerksam zu machen was Sie ihm zu bieten haben. Jetzt gibt es unzählige verschiedene Möglichkeiten, dies zu tun, wie YouTube, Instagram und jede Menge andere Möglichkeiten, die nichts mit sozialen Medien zu tun haben. Diese werden wir im Marketingkurs genauer behandeln, werden wir im Marketingkurs genauer behandeln um die beste Lösung für Sie zu finden Wenn jemand nicht weiß, wer Sie sind oder was Sie anbieten können, kann er letztendlich wer Sie sind oder was Sie anbieten können, niemals bei Ihnen kaufen Aber sobald sie wissen, wer Sie sind, ist der nächste Schritt des Trichters die Überlegung Nun, hier betrachten sie Sie tatsächlich als potenzielle Option oder als mögliche Lösung für ihre Herausforderungen Hier schauen sie sich Ihre Website an. Sie versuchen herauszufinden, ob Sie die richtige Option für sie sind. Und wenn sie letztendlich entschieden haben, dass Sie die beste Option und das beste Preis-Leistungs-Verhältnis für diese spezielle Situation sind die beste Option und das beste Preis-Leistungs-Verhältnis , dann geht es zur dritten Phase über, der Konvertierung. Hier kaufen sie tatsächlich bei Ihnen. Hier ziehen sie ihr hart verdientes Geld aus der Tasche und geben es Ihnen als Gegenleistung für das, was Sie zu bieten haben. Jetzt ist Ihre Website ein wichtiger Bestandteil um diese Konvertierung tatsächlich erfolgreich zu erzielen. Denn wenn Ihre Website nicht auf dem neuesten Stand ist, was, wenn Sie diesen Kurs besucht haben, dann werden Sie diese Konvertierung letztendlich nie erreichen , weil Ihre Website nicht vertrauenswürdig ist, und es wird dem Kunden nicht die Gewissheit geben, seine Hand in die Tasche zu stecken, Ihnen sein dann werden Sie diese Konvertierung letztendlich nie erreichen , weil Ihre Website nicht vertrauenswürdig ist, und es wird dem Kunden nicht die Gewissheit geben dem Kunden nicht die Gewissheit seine Hand in die Tasche zu stecken, Geld zu geben, weil er nicht glauben wird, dass Was sie als Ersatz für ihr Geld erhalten , wird sich lohnen. Im Grunde genommen fühlt sich ein Kunde beruhigt, wenn er das Gefühl zu bekommen, was er erwartet, oder vielleicht sogar seine Erwartungen zu übertreffen wenn er Ihnen sein Geld gibt. diesem Grund gibt es Marken tatsächlich, denn wenn wir einer vertrauenswürdigen Marke unser Geld geben, wissen wir, dass wir im Gegenzug etwas bekommen werden, das unseren Erwartungen entspricht. Wenn wir noch nie mit einer Person oder einer Marke Geschäfte gemacht haben, fühlen wir uns letztendlich etwas unsicher, wann wir unser Geld übergeben, weil es ein bisschen riskanter Jetzt fragst du dich wahrscheinlich, was der letzte Schritt dieses Marketing-Funnels Und das ist letztlich Kundenbindung. Sobald Sie einen Kunden konvertiert haben, haben Sie sich so viel Mühe gegeben , diesen Verkauf tatsächlich zu erzielen. Das Nächstbeste , was Sie tun können, ist , diese Person Ihrer Marke und dem, was Sie zu bieten haben, treu zu halten , diese Person Ihrer Marke und dem, was Sie zu bieten haben, treu . diesem Grund sind Marken wie zum Beispiel Netflix und auch Apple sehr lukrative Unternehmen, weil sie letztendlich wiederkehrende Einnahmen erzielen können , weil sie jeden Monat einheitlich bezahlt werden jeden Zum Beispiel habe ich vielleicht diese Kopfhörer und diesen Computer von Able gekauft , aber ich zahle auch jeden Monat 10$ für meine Cloud, in der ich im Grunde alle meine Dateien speichere Das ist Geld, das jeden Monat sofort in Apples Tasche fließt. Und die einzige Möglichkeit, ihnen das wegzunehmen, besteht darin, letztendlich all meine Dateien zu nehmen und sie woanders abzulegen. Lohnt sich nicht wirklich. Netflix ist genau das Gleiche. Wenn Sie hier bei Netflix aufhören, erhalten Sie keinen Zugriff mehr auf all die großartigen Inhalte. Letztlich geben Sie Netflix also einfach die zehn bis 12 US-Dollar pro Monat, damit Sie Ihre faulen Abende mit Ihrem Partner genießen können faulen Abende mit Ihrem Partner Nun, das ist etwas, das wir im Marketingkurs viel ausführlicher und detaillierter behandeln viel ausführlicher und detaillierter Marketingkurs viel ausführlicher und detaillierter Aber natürlich möchten wir Ihre Zeit hier respektieren. Nun, was den Aufbau eines Unternehmens angeht, der erste Schritt, Ihren ersten Kunden zu gewinnen oder ist es der erste Schritt, Ihren ersten Kunden zu gewinnen oder einen Kunden zu gewinnen. Aber wenn Sie diesen Kunden halten, wird der größte Teil des Gewinns erzielt. Wenn Sie also versuchen können, Ihr Geschäftsmodell so zu ändern , dass letztendlich mehr an diese einzelne Person verkauft wird, um den CLV, den Customer Lifetime Value, wirklich zu maximieren , dann können Sie aus jeder einzelnen Orange, die auf Ihrer Website landet , auch bekannt als Kunde, mehr Saft herausholen jeder einzelnen Orange, die auf Ihrer Website landet , auch bekannt als Kunde, Erzielen Sie letztendlich innerhalb kürzester Zeit so viel Umsatz wie möglich Offensichtlich ist es ein bisschen komplizierter als das. Und natürlich können wir in diesem speziellen Kurs nicht alles behandeln, da es sich in erster Linie um einen Kurs zur Entwicklung von Websites handelt. Wenn Sie jedoch Fragen haben, können Sie sich gerne an mich wenden . Ich helfe Ihnen gerne und unterstütze Sie so gut wie möglich, Ich helfe Ihnen gerne und unterstütze Sie so gut wie weil ich möchte, dass Sie erfolgreich sind. Wie dem auch sei, ich hoffe, dass Sie diese Lektion hilfreich finden, und wir sehen uns in der nächsten. Wir sehen uns bald. 71. Nach dem Start: Deine Website verfeinern, um für die Conversion zu optimieren: Wie können Sie Ihre Website verfeinern , um Konversionsrate und Leistung zu optimieren Nun, das Erste, was ich Ihnen wärmstens empfehlen würde , ist an einem Tag pro Monat zu buchen, um Ihre Daten für heiße Gläser zu überprüfen. Wenn Sie die vorherige Lektion des Kurses zur Installation von Hot Jar gelesen haben, sollten Sie diese bereits auf Ihrer Website und sofort loslegen können. Sobald Sie es installiert haben, buchen Sie einen bestimmten Tag pro Monat, möglicherweise den ersten des Monats, was ich persönlich benutze, wo Sie sich im Grunde genommen etwas Zeit nehmen um sich alle Besuche und all die Personen anzusehen , die Ihre Website angesehen und tatsächlich etwas auf Ihrer Website gemacht und vielleicht innerhalb dieses Monats geklickt oder einfach nur erkundet haben und tatsächlich etwas auf Ihrer Website gemacht und vielleicht . Letztlich könnten das einige Aufzeichnungen sein , wenn Ihre Website beliebt ist Und wenn ja, ist das fantastisch. Aber ich würde vorschlagen so viel Zeit wie möglich damit zu verbringen, diese Aufnahmen zu überprüfen und sich dann einfach nebenbei Notizen zu machen, um im Grunde zu sagen: Okay, auf dieser speziellen Seite neigen die Leute dazu, den Call-to-Action-Button nicht so leicht zu finden . Wie kann ich diese Schaltfläche nehmen und sie auf der Seite sichtbarer machen? Das habe ich vor Kurzem auf einer bestimmten Seite in einem meiner Unternehmen gelernt , wodurch ich letztendlich meine Konversionsrate für generierte Leads um bis zu 4% erhöhen konnte . Ursprünglich habe ich nur 2% Konversionen erzielt, und dann sind es bis zu sechs allein durch diese eine einzige Änderung. Selbst wenn Sie die Stimmzettel rechnen, können Sie feststellen, dass Selbst wenn Sie die Stimmzettel rechnen, können Sie feststellen, es ein ziemlich gutes Ergebnis ist man bedenkt, dass ich nur eine einzige Schaltfläche auf der Seite geändert habe , was mich zu meinem nächsten Ansatz führt, wenn es darum geht, Ihre Website im Webflow zu optimieren? Nun, das alles läuft auf sogenannte AB-Tests hinaus, was kein Hexenwerk ist Es ist eigentlich ganz einfach, also mach dir keine Sorgen. Nun, was wirklich wichtig ist, daran zu denken, wenn Sie verschiedene Dinge auf Seiten testen verschiedene Dinge auf Seiten ist, nicht zu viel auf einmal zu ändern. Wenn ich zum Beispiel die Seite mit dieser einzigen Schaltfläche nehmen würde, die ich geändert habe, und ich drei oder vier andere Dinge auf der Seite ändern, dann würde ich nie wissen, was sich tatsächlich auf die höhere Konversionsrate auswirkt die höhere Konversionsrate Es hätte natürlich der Button sein können. Es hätte die Änderung der Schlagzeile sein können. Es hätte die Änderung des Fußes sein können. Es hätte der Bildwechsel sein können, den ich vorgenommen habe. Wenn ich sie alle auf einmal machen würde, hätte ich keine Daten sich auf das neue Verhalten auswirken könnten. Es ist also viel besser, im Grunde genommen das bestehende Design zu nehmen und eine einzige Sache zu ändern, bevor man dann eine andere Sache ändert und langsam, aber mit der Zeit immer besser wird. Denn wenn ich zum Beispiel diese einzelne Taste ändere und die Konversionsrate schlechter wird, dann würde ich wissen, dass ich diese Schaltfläche wieder so machen muss wird, dann würde ich wissen , wie sie war. Und wenn Sie das nachverfolgen und dies im Auge behalten und Ihren Zustand schrittweise angehen können , Ihre Website entwerfen und im Laufe der Zeit verbessern können, dann werden Sie am Ende nach und nach ein weitaus besseres Ergebnis erzielen . Aber was die meisten Leute tun, ist, sich zu beeilen zu versuchen, ihre gesamte Website auf einmal zu ändern. Und sie haben nichts Vergleichbares, weil sie nicht wissen, was funktioniert und was nicht Sie sind also ständig im Ratespiel Ich hatte tatsächlich eine Website, auf der ich sie für einen Kunden erstellt habe. Es kostete ungefähr 15 Riesen. Und innerhalb von zwei Wochen, nachdem ich die Website dem Kunden übergeben hatte und im Grunde sicherstellte , dass alles an seinem Platz war, wurde schließlich so ziemlich die gesamte Homepage geändert Das war offensichtlich nicht ideal, weil wir nicht einmal wussten, was funktionierte und was nicht Wir waren einfach genauso kompetent wie Beginn, als wir noch keine Daten hatten Jetzt gehen die Leute auf die Website, und zum Glück habe ich es geschafft, sie zu erwischen und irgendwie wieder an das heranzukommen was wir vorher hatten, bevor es zu chaotisch wurde Aber letztendlich müssen wir sicherstellen, dass wir sehr vorsichtig vorgehen wenn wir unsere Website entwickeln, wenn wir Dinge optimieren, wenn wir versuchen, Dinge zu verbessern Denn wenn Sie nichts haben, womit Sie es vergleichen können, und Sie wissen nicht wirklich, ob Sie sich verbessern oder nicht. Sie wissen nicht wirklich, was die Verbesserung bewirkt. Und deshalb bleibst du einfach am selben Ort oder noch schlimmer. Nun, es braucht ein bisschen Zeit und ein bisschen Geduld, um diesen Ansatz wirklich richtig anzuwenden. Wenn Sie nun Fragen zur Verwendung Hot Jar oder zur Bewertung Ihrer Website-Daten haben, Sie sich gerne an uns wenden. Ich bin hier, um Sie auf jede erdenkliche Weise zu unterstützen. Ich möchte wirklich, dass Sie erfolgreich sind, also zögern Sie nicht, sich an uns zu wenden , wenn Sie zusätzliche Hilfe benötigen. Ich hoffe jedoch, dass Sie diese Lektion hilfreich finden, und ich freue mich darauf, Sie in der nächsten Lektion zu sehen . Ich werde dich sehen. 72. Nach dem Launch: So weißt du, wenn deine Website perfekt ist: Woher wissen Sie also, wann Ihre Website fertig und perfekt ist? An diesem Punkt haben Sie viel Arbeit investiert, um zu verstehen, wie Sie Ihre Website erstellen, und Sie haben sie wahrscheinlich an einem Punkt angelangt, an dem Sie damit ziemlich zufrieden sind. Aber woher weißt du, dass es richtig ist? Nun, es gibt ein paar Dinge, die Sie wissen müssen, wenn es darum geht, eine Website zu erstellen und zu wissen, wann sie perfekt ist. Und die Wahrheit ist, es ist nie wirklich perfekt. Und der Grund, warum ich das sehe, ist, dass es immer Verbesserungspotenzial gibt. Nun, was ich jedem einzelnen Studenten, der in diesen Kurs investiert, anbiete , dass ich ihm ein wenig Feedback zum Design seiner Website gebe Feedback zum Design seiner Website Nun, Sie haben in diesen Kurs investiert und letztendlich darauf vertraut, dass ich Sie durch diesen Prozess führe Das Mindeste, was ich tun kann, ist, Ihnen ein wenig Feedback dazu zu geben , wie Ihre Website aussieht und sich anfühlt, damit Sie sie so gut wie möglich gestalten können. Und um das zu tun , muss ich tatsächlich Ihre Website sehen. Wenn Sie also Ihre Website fertiggestellt haben, teilen Sie sie mir als Projekt in diesem Kurs mit, denn dadurch wird im Wesentlichen sichergestellt , dass ich Ihnen konstruktive Kritik geben oder Ihnen einfach sagen kann , wie toll Sie sind, damit Sie sich voll und ganz darauf verlassen können , dass Ihre Website Veröffentlichung bereit ist. Und ich möchte zu 100% versprechen, dass ich mich zu 100% bei Ihnen melden möchte, wenn Sie es als Projekt teilen . Ich werde mich zu 100% bei Ihnen melden und Ihnen konstruktive Kritik und jegliches Feedback geben Ihnen konstruktive Kritik und , das ich habe, um Ihnen zu helfen, die Website zu verbessern. Jetzt müssen Sie sich nicht alle meine Ratschläge anhören, aber ich möchte Ihnen nur meine ehrlichen Gedanken mitteilen, damit Sie die beste Entscheidung für Ihr Unternehmen und Ihre Marke treffen können . Und sobald Sie das tatsächlich getan haben und Ihre Website perfekt eingerichtet ist, der nächste Schritt darin, den Traffic auf Ihre Website zu lenken. Ich wollte wirklich kurz die Schritte eines Marketing-Funnels behandeln , damit Sie verstehen welche Rolle Ihre Website dabei gespielt hat, jemanden, der Ihre Marke anfangs überhaupt nicht kannte, in einen zahlenden Kunden umzuwandeln Ihre Marke anfangs überhaupt nicht kannte und wie das alles Damit Sie jedoch eine umsetzbare Marketingstrategie für Ihre Marke und Ihr Unternehmen entwickeln eine umsetzbare Marketingstrategie für und tatsächlich mit dem Wachstum Ihrer Marke und Ihres Unternehmens beginnen können, benötigen Sie eine Strategie und einen Plan, um den Website-Traffic auf Ihre Website zu lenken, damit sie bei Ihnen einkaufen können Damit Sie jedoch tatsächlich Traffic generieren und Ihre Website damit beginnen kann, Ihre Website damit beginnen kann sie in zahlende Kunden umzuwandeln, müssen Sie über einen Plan verfügen um Ihr Marketing tatsächlich richtig Und wenn Sie einen unserer Kurse besucht haben und wenn Sie bereits einen unserer Kurse im Brand Builder Pro-Programm besucht haben , dann wissen Sie, dass der nächste Schritt im Brand Builder Pro-Programm Ihr strategischer Marketingkurs ist. Dies deckt alles ab, was Sie benötigen, um eine umsetzbare Marketingstrategie zu entwickeln eine umsetzbare Marketingstrategie , die in der digitalen Welt, in der wir uns heute befinden, funktioniert um relevanten Traffic auf Ihre Website zu lenken, sodass Sie mehr Kunden gewinnen, mehr Umsatz und letztendlich mehr Gewinn erzielen können . Wie dem auch sei, ich bin so dankbar, dass Sie Ihre Zeit und Energie investiert haben Ihre Zeit und Energie investiert um mir zu vertrauen, Sie durch diesen Prozess zu führen Ich kann es kaum erwarten, die Website zu sehen, die Sie erstellen. Bitte stellen Sie sicher, dass Sie es mir so gut wie möglich mitteilen , und ich freue mich darauf, Sie hoffentlich in einem zukünftigen Kurs zu sehen . Vielen Dank und wir sehen uns bald wieder. 73. Website-Projektzeit: Ich möchte Ihnen nur ein bisschen zum Mitnehmen geben, nur um Ihr Wissen zu testen Jetzt möchte ich sicherstellen, dass Sie alle Fragen stellen , die Sie in Bezug auf strategisches Website-Design haben , aber ich möchte auch, dass Sie einfach einen Screenshot einer Website machen, die Ihrer Meinung nach perfekt gestaltet und als Projekt in diesem Kurs hochgeladen diesem Kurs Und diese Website könnte auf Pinterest sein. Es könnte etwas sein , das Sie bei Google finden. Es könnte eine Website sein , die Sie tatsächlich kennen. Es könnte sogar eine Website sein, die Sie erstellt haben Sie jetzt wissen , dass sie den wichtigsten Regeln für strategisches Website-Design und schönes Website-Design entspricht sie den wichtigsten Regeln für strategisches Website-Design . Stellen Sie also sicher, dass Sie in diesem Kurs mindestens eine Website als Projekt teilen , nur um zu zeigen, dass Sie die wichtigsten Grundlagen des strategischen Website-Designs verstehen die wichtigsten Grundlagen strategischen Website-Designs Und zögern Sie nicht, auch einige Notizen zu hinterlassen. Ich möchte, dass Sie die Lektionen verstehen , die wir unterrichtet haben Sie wissen immer, dass ich Sie und all die anderen Studierenden , die so viel wie möglich in unsere Kurse investieren, gerne unterstütze die anderen Studierenden , die so viel wie möglich in unsere Kurse investieren, so viel wie möglich in unsere Kurse . Also zögern Sie nicht, sich an uns zu wenden. Wenn Sie uns eine E-Mail senden möchten, schauen Sie bitte auf unserer Website vorbei. Wir haben dort jede Menge anderer Tools und Ressourcen , die Sie bei Ihrer Markenbildung unterstützen. Vielen Dank und wir sehen uns beim nächsten Mal. Sehen Sie.