Eine Landing-Seite Mit Der Conversion 2022 erstellen

1. Einführung: Hallo zusammen, willkommen zu diesem neuen Kurs zum Lernen der Landingpage, der mit den richtigen SEO-Optimierungstechniken entworfen wurde . Es war ein Traum von mir, diesen ultimativen Kurs für alle zu entwickeln diesen ultimativen Kurs für , die sich mit der geschäftlichen Seite des Designs beschäftigen möchten. Da sind wir. Ich hoffe, dass dieser Kurs Ihr Leben buchstäblich verändern kann. Also, was ist das, was werden wir hier lernen? Webdesign ist also eigentlich eine Kombination aus zwei verschiedenen Fähigkeiten oder Branchen. Eines davon ist Grafikdesign. Wie man Design, Formen, Text und Bilder verwendet , um eine Botschaft zu vermitteln. Und das andere ist das Web. Wie Menschen im Internet interagieren, welche Benutzererfahrungen gibt und wie entwickeln Sie Ihre Ideen für den Traffic , damit sie im Browser funktionieren. All diese Dinge werden wir in diesem Kurs behandeln. Sie können erwarten, die Grundlagen von Landingpages zu erlernen , wo zusätzliche Dinge wie Topographie, Verwendung von Farben, die Verwendung von Layouts und die Verwendung von Bildern und andere Marketingtechniken wie Knappheit, Authentizität, Glaubwürdigkeit. Wir werden auch über alle Webfähigkeiten aus Sicht der Benutzererfahrung und des UI-Designs sprechen alle Webfähigkeiten aus Sicht der Benutzererfahrung , und das Ganze funktioniert tatsächlich im Web. In diesem Kurs werden wir sehen, wie Sie mit dieser Fähigkeit Geld verdienen können. Wie Sie Projekte annehmen und sie tatsächlich für Kunden erledigen können. Und und Geld durch die Konvertierung einer einfachen NADH- und zwei konvergenten , fokussierten Planung . Wenn Sie planen Ihre Website, Ihr Produkt oder Ihre Dienstleistung online zu vermarkten und zu bewerben, erhalten Sie viel bessere Ergebnisse, wenn Sie Ihren Traffic auf eine spezielle Landingpage senden . Und dafür benötigen Sie keine Vorkenntnisse im Bereich des Urheberrechts. Außerdem gelbe Fähigkeiten. Alles, was Sie brauchen, ist diese einfachen Anweisungen zu befolgen , die ich in diesem Kurs behandeln werde. Wer bin ich jetzt? Falls du es nicht kennst, mein Name ist Jay Hair Helmet. Ich bin ein UX-Designer mit mehr als fünf Jahren Erfahrung. Zu diesem Zeitpunkt hatte ich die ganze Zeit als Senior UX Designer bei einem multinationalen Unternehmen gearbeitet Senior UX Designer bei ganze Zeit als Senior UX Designer bei einem multinationalen Unternehmen Ich habe Hunderten von Kleinunternehmern, Designagenturen und Startups geholfen Kleinunternehmern, Designagenturen und Unternehmen und verschiedene Softwarehäuser, um eine bessere Lead-Konvertierung auf ihren Websites zu erzielen. Analysieren Sie persönlich Endperioden mithilfe Wettbewerbsanalysen und zeigen Sie ihnen, wie sie ihre Landingpages verbessern können , damit sie qualitativ hochwertige Ergebnisse erzielen und durch sinkende CRO-Techniken mehr Leads generieren können. Ich habe meine SEO-Techniken und Tipps mit verschiedenen Unternehmen und Unternehmern geteilt . Und sie sind mit diesen Techniken ziemlich zufrieden und haben im Vergleich zu den vorherigen Landingpages mehr Blätter generiert . Und jetzt freue ich mich darauf, euch diese Marketingmaßnahmen, Techniken und Tipps in meinem neuen Landing-Page-Kurs beizubringen diese Marketingmaßnahmen, Techniken und . Dieser Kurs ist so konzipiert , dass selbst ein Anfänger , der das Webdesign nicht kennt und noch neu im Webdesign ist, leicht verstehen und anwenden kann Techniken in seinem Kunstdesign leicht verstehen und anwenden kann. Und das werden wir in diesem Kurs behandeln . Also, warum sollte es dich interessieren? Warum solltest du UX Designer werden wollen? Wie ich bereits sagte, ist dies heute und auch in Zukunft eine sehr wertvolle Fähigkeit auf dem Markt. Websites gehen nirgendwohin. Es spielt keine Rolle, dass die meisten Menschen auf ihren Handys sind. Sie besuchen immer noch Websites, sie kaufen immer noch online ein. Aus diesem Grund werde ich die Marketingverkaufstechniken in unserem Webdesign oder unserer Landingpage behandeln die Marketingverkaufstechniken in . Das war also so ziemlich alles für diese Vorlesung. Wir sehen uns in der nächsten Vorlesung. 2. Verwenden der Übungsdateien: In diesem Video zeige ich dir, wie du mit Trainingskämpfen beginnen kannst. Die Übungsdateien für diesen Kurs sind in dieser Vorlesung enthalten . Die von mir hochgeladene Übungsdatei enthält eine Figma-Datei. Es enthält alle in diesem Kurs verwendeten Ressourcen. Bitte laden Sie diese Datei herunter, damit wir unsere Reise fortsetzen können, indem wir in Figma eine Landingpage für Schuhe mit CRO-Techniken erstellen. Diese Übungsdatei, die ich hochgeladen habe , enthält keine Auswirkungen auf meine Datei, also weiter. Folgen Sie mir einfach durch diesen Kurs. Ihr wisst also, wie ihr euer eigenes Figma-Projekt erstellen könnt . Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 3. Was sind Landing-Pages einschließlich meiner persönlichen Meinung?: Okay, es gibt also viele verschiedene Arten von Nanak-Seiten da oben im Internet. Es gibt viele verschiedene Arten von Vorlagen für Seiten. Aber heute werde ich Sie durch vier sehr gängige Arten von Vorlagen und Landingpages im Internet führen. Damit Sie ein bisschen mehr darüber erfahren wie Sie diese einrichten müssen , damit Sie den größten Einfluss auf Mikro- und Makrokonversionen haben und Ihr Geschäft online ausbauen können auf Mikro- und Makrokonversionen . Okay? Die erste, über die ich sprechen möchte, ist die Landingpage. Wenn Sie also mit der Landingpage nicht vertraut sind, ist es die Hauptseite Ihrer Website, auf der Sie möchten die Leute reinkommen und dass sie konvertieren. Sie verwenden dies wahrscheinlich für die Suchmaschinenoptimierung und viele kostenpflichtige Medien auf vielen Seiten. Sie wurden speziell für kostenpflichtige Medien entwickelt. Aber wenn Sie es richtig machen, können Sie dieselbe Seite verwenden, um innerhalb von Google zu ranken. Und Sie werden dieselbe Seite für kostenpflichtige Medien verwenden. Und Sie können dieselben Keywords und dieselbe Zielgruppe auf diesen Seiten ansprechen. Also konkret, wie möchten Sie Ihre Landingpage einrichten , damit Sie die besten Ergebnisse erzielen. Das erste, was Sie tun möchten, ist eine aussagekräftige Überschrift und ein paar Aufzählungspunkte oder etwas Text. Und wenn Sie darüber nachdenken, sollten Sie an den Sieben-Sekunden-Test denken. Also, wenn innerhalb der siebten Sekunden jemand speziell in diesen Bereich kommt, weiß er, wer du bist? Kennen sie das Problem, das Sie lösen? Weil Sie Ihre wichtigsten Unterscheidungsmerkmale kennen. Und haben sie genug Gewissheit, dass sie auf die Kontakt-Schaltfläche klicken möchten? Sie wollen sich an dich wenden. Ebenfalls im oberen Teil der Lernseite. Sicherlich eine gute Idee, ein aussagekräftiges Image zu haben , das speziell auf diese demografische Gruppe zugeschnitten ist. Du willst verschiedene Dinge testen. Ein Bild ist also großartig, wenn es der demografischen Gruppe und dem , was Sie verkaufen möchten, entspricht. Darüber hinaus können Sie auch Testimonials ausprobieren. Du kannst es natürlich versuchen. Es gibt viele verschiedene Dinge, die wir je nach Art des Unternehmens, das Sie haben, dort einbauen möchten . Sie haben also die Überschrift, den Sieben-Sekunden-Test. Sie haben Bilder aufgenommen , die speziell für diese Person sprechen. Und in vielen Fällen werden Sie in der Lage sein , eine korrekte Konvertierung durchzuführen. Jetzt. Eine andere Sache, die ich erwähnen werde, ist dieser Aufruf zum Handeln super, sehr wichtig ist. Also die Farbe zu testen, den Text zu testen, den Sie haben, ihre Mikrofone sind wirklich, wirklich ein großer Unterschied. Häufig sind also mehr erfahren. Kontakttest. Fangen Sie jetzt an, erhalten Sie ein kostenloses Angebot. Ruf uns an. Sie müssen über all die verschiedenen Möglichkeiten nachdenken , wie die Leute Kontakt aufnehmen möchten. Und Sie müssten darüber nachdenken, wie engagiert sie zu diesem Zeitpunkt waren. Wenn es also nur darum geht, mehr zu erfahren, viel weniger Engagement, als uns zu kontaktieren. Sie möchten also darüber nachdenken Weisheit auf der Reise ist, und verschiedene Botschaften testen und auch dort verschiedene Farben testen. Viele Leute lieben den großen orangefarbenen Knopf. Pig Oink Button ist fantastisch, aber die Farbe ist nicht so wichtig, eher, wie er in die Seite passt, oder? Bei einer bestimmten Webseite möchten Sie also nie zu viel Platz oder ein Farbschema haben. Es gibt eine wirklich, wirklich wichtige Sache. Sie möchten, dass der wichtigste Call-to-Action das Klischeste auf der Seite ist. Da wird das Auge hingehen. Und Sie werden sehen , dass, wenn Sie Dinge wie Heatmaps namens Content Analytics installieren , dem die meiste Aufmerksamkeit geschenkt wird. Also, wenn du weiter unten auf der Seite gehst, willst du darüber nachdenken, naja, okay, also hier oben habe ich meinen besten Elevator Pitch gegeben, rechtes Auge vor dem Lachs zweiten Test, ich habe einen guten Job gemacht, aber hat sie nicht vollständig verkauft. Also, was wirst du als Nächstes tun? Nun, das ist eine Person, die mehr Informationen benötigt. Worüber Sie also nachdenken möchten, ist, weiter Sie auf der Seite vorankommen, welche Hauptmodule diese Person zur Konvertierung veranlassen werden welche Hauptmodule diese Person zur Konvertierung veranlassen werden? Oft sind es Dinge wie Glaubwürdigkeit. Wurden Sie also in wichtigen Branchen, Publikationen oder nationalen Publikationen vorgestellt ? Es sind Zeugnisse. Sie haben Testimonials von Ihren spezifischen Kunden, die gewisses Maß an Glaubwürdigkeit bieten. Wenn CPUs haben, wissen Sie, 1.000 Bewertungen, um Pilot oder so etwas zu vertrauen, wo Sie einbringen und dieses Maß an Glaubwürdigkeit nachweisen können . Sind es FAQs , in denen Sie spezifische Fragen beantworten , die diese Person haben würde , damit das Drehmoment T. Und versuchen Sie es auf anderen Seiten Ihrer Website herauszufinden. Ich liebe es, FAQs zu stellen. Ist es ein Blogbeitrag? Sind es Auszeichnungen, Sie wissen schon, Dinge, die diese Glaubwürdigkeit stärken. Und Sie als Fachexperte oder Ihr Unternehmen als Fachexperte, damit sie konvertieren wollen. Ist es eine Risikoumkehr? Wenn Sie mit dem Konzept der Risikoumkehrung nicht vertraut sind , ist es die Idee, dass Sie, wissen Sie, inzwischen eine 30-tägige Geld-zurück-Garantie gekauft haben. Die Risikoumkehr ist enorm, wenn es darum geht, Menschen dazu zu bringen, sich zu engagieren, da sie dadurch die Markteintrittsbarriere für Ihr Unternehmen vollständig verringern müssen. Wenn wir also über eine Landingpage nachdenken, sollten Sie über all diese verschiedenen Elemente nachdenken und ständig testen. Ich kann dir nicht sagen, wie oft Leute diesen Bereich einfach verlassen werden. Sie sind seit Jahren und Jahren dieselben. Überlegen Sie, wie viel Geld Sie verdienen könnten, wenn Sie einfach Dinge ausklauen und diesen Konvergenzkurs um ein oder zwei Prozent erhöhen . Vor allem, wenn Sie jeden Zehntausende, Hunderttausende, Monat Zehntausende, Hunderttausende, Millionen an kostenpflichtigen Medien nutzen, was einer Veränderung von 1% entspricht. Das Geschäft hat erhebliche Auswirkungen. Absolut substanziell. Ich habe meine SEO-Techniken und Tipps mit verschiedenen Unternehmen und Unternehmern geteilt . Und sie sind ziemlich zufrieden mit den Techniken und haben im Vergleich zu den vorherigen Landingpages mehr Blätter generiert . Jetzt freue ich mich darauf, Ihnen diese Marketingverkaufstechniken und Tipps auf meiner Landingpage beizubringen diese Marketingverkaufstechniken und . Optimierung der Konversionsrate ist eines der unterhaltsamsten Dinge wenn man sieht, dass sie tatsächlich funktioniert. Okay, wir haben also über Landingpages gesprochen, und ich könnte natürlich viel tiefer darauf eingehen. Aber für dieses Video möchte ich Ihnen nur einen Überblick über Klinikseiten geben, was Landingpages und wie sie Ihnen in Ihrem Unternehmen helfen werden. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 4. Einrichtung eines Grids für Landing-Page: Willkommen zurück, Schüler. In diesem Video werden wir kostenpflichtige Angebote für unsere Landingpage einrichten . Erstellen Sie zunächst einen Frame, indem Sie die F-Taste auf Ihrer Tastatur drücken. Und auf dem Desktop. Wählen Sie in der Dropdownliste 14, 40 x 1024 Frame aus. Benennen Sie den Frame um, um die Landingpage anzuzeigen. nun im Eigenschafteninspektor Klicken Sie nun im Eigenschafteninspektor auf diese Ebenenoption. Von hier. Wählen Sie Spalten aus. Ändern Sie danach das Konto auf 12 und den Seitenrand auf 160 Pixel. Und es ist wichtig für 24. Drücken Sie nun Umschalttaste plus R auf Ihrer Tastatur, um die Lineale zu öffnen. Danach füge links und rechts ein Lineal hinzu. Fügen Sie außerdem ein Lineal von oben mit einer Höhe von 80 Pixeln hinzu. Dies ist der für unseren Header zugewiesene Platz. So richten Sie also ein Raster für eine Landingpage ein. Wir sehen uns im nächsten Video. Wir werden uns ein Design-Briefing ansehen. Und dann werden wir uns eingehend mit dem Abschnitt Freispruch des Helden auf unserer Landingpage befassen . 5. Header und Hero Section UI: In diesem Video starten wir den Header- und Heldenbereich unserer Landingpage. Aber vorher möchte ich Ihnen einen kurzen Überblick über den Four Design Brief geben. Das ist also unsere Designsicht. Hier sehen Sie den Firmennamen, die Unternehmensbeschreibung, die Projektergebnisse und die Frist für das Projekt, bei dem es sich nicht um Ergebnisse handelt. Sie werden sehen, dass der Kunde eine Landingpage erstellen möchte , Fehler zeigen Website. Die Landingpage sollte für CRO optimiert sein, damit er mehr Leads und Geschäfte generieren kann. Gehen wir jetzt zu unserem Freund über. Hier werden wir den Header unserer Landingpage gestalten , da dies die Landingpage ist. Also werde ich das Logo für diese Landingpage nicht entwerfen . Ich füge hier nur ein generisches Logo ein. Danach füge ich auf der rechten Seite der Navigationsleiste ein zwölf mal 12-Kreis-Navigationssymbol mit einem Warenkorbsymbol ein, da es sich um 12-Kreis-Navigationssymbol mit einem Warenkorbsymbol eine E-Commerce-Landingpage handelt. Dies ist die Farbpalette wir auf unserer Landingpage verwenden. Und die Formen, die wir in dieser Sprache oder in diesen Zusammenstößen verwenden werden, spielen und hebräisch. Jetzt haben wir den Header für unsere Lernseite entworfen. Drücken Sie die L-Taste und fügen Sie eine separate Zeile darunter Ändern Sie die Farbe ebenfalls in Rot. Gehen wir nun zu unserer Heldenabteilung über. Auf der linken Seite unseres Hero-Bereichs schreiben wir ein Leistungsangebot mit einer kleinen Beschreibung des Produkts. Danach fügen wir die Größe und Art des Produkts hinzu, da es sich um eine Landingpage für Schuhe handelt. Jetzt fügen wir einen CTA hinzu, das heißt, wir sollten prominent sein, sodass wir ein Rechteck von rund 295 mal 64 zeichnen. Füllen Sie es mit seiner schwarzen Radialfarbe aus. Ändern Sie den Randradius dieses Rechtecks auf vier. Danach fügen Sie hier ein Warenkorbsymbol hinzu. Kopieren Sie das Symbol aus den Übungsdateien. Fügen Sie nun einen CTA-Text und den Produktpreis hinzu. Es wird also die Aufmerksamkeit des Benutzers erregen. Um dieses CDM nicht attraktiv zu machen, fügen wir einen Schlagschatten hinzu. Also klicken Sie einfach auf diesen CTF-Hintergrund. im Eigenschaftenfenster Klicken Sie im Eigenschaftenfenster auf diesen Effektschritt und wählen Sie dort Schlagschatten aus. nun in den Schlagschatteneigenschaften Ändern Sie nun in den Schlagschatteneigenschaften die X-Achse auf Null und greifen Sie auf 39 Farben auf diese Farbe zu. Und seine Opazität auf 40 Prozent sollte 53 betragen und die Streuung sollte -20 betragen. Danach fügen wir Authentizität hinzu. Fügen Sie also eine Notiz und einen Patch für eine verzerrte Zahlung hinzu, kopieren Sie die Seite aus den Übungsdateien und fügen Sie sie unter diese CTA-Schaltfläche ein. Danach gab es ein Testimonial unter diesem Authentizitäts-Tab. Um hier ein Testimonial hinzuzufügen, zeichnen Sie ein Rechteck von etwa 395 mal 70, um es rund zu machen. Aber du musst einen Radius unterstützen. Fügen Sie danach einen Strich von 0,7 und Pixeln um diese Form herum hinzu. nun in dieser Form auf der linken Seite vom Benutzer geschriebene Sterne hinzu. Kopiere die Sterne aus den Übungsdateien und platziere sie hier in der Mitte, rechts neben dir, ein generisches Testimonial . Das Bild. Richten Sie sie nun richtig mit der Schere aus. linke Spalte ist fertig. Jetzt passen wir die Abstände in unserer linken Spalte an, da wir mit dem achtspaltigen Rastersystem arbeiten. Also werden wir unser Design entsprechend anpassen. Acht Spalten, das bedeutet, dass Sie den Abstand in ein Vielfaches von Acht setzen. Sagen wir 8162430 bis 40. Danach. Gehen wir zur rechten Seite unseres Heldenbereichs. Hier werden wir ein starkes Testament hinzufügen, das unser Wertversprechen rechtfertigen wird. Auf der rechten Seite für ein weißes Rechteck von etwa 614 mal 61, schlecht. Platziere es hier. Fügen Sie einen Strich dieser Farbe mit der Größe fünf hinzu. Danach wurden drei Lippen über diesen Kreis gebracht, was ein Schloss für unser Produkt sein wird. Fügen Sie nun eine weitere Ellipse in dieses weiße Leben ein. Ändere seine Farbe in Gelb. Fügen Sie anschließend einige Merkmale über diesem gelben Kreis oder Rechteck von etwa 239 mal 73 hinzu. Fügen Sie ein Schuhbild hinzu, wenn diese Funktion aktiviert ist. Richten Sie es richtig aus. Wählen Sie nun das Stiftwerkzeug und zeichnen eine gekrümmte Linie von etwa 80 mal 4%. Und danach, richtig, 360 Grad Übergewicht. Platzieren Sie nun das Hauptbild auf dem CRO-Kreis. Zeige Bilder aus der Übungsdatei. Danach fügen wir verschiedene Blickwinkel dieses Shootings hinzu. Dafür. Zeichne drei Rechtecke mit einem Randradius von 16. Ich ändere die Farbe dieser Rechtecke. Zuerst gelb bis grün und drittens lila. Danach bei Bildern aus den Übungsdateien über diese Rechtecke. Jetzt werden wir das zu diesen Bildern hinzufügen. Dafür kamen also drei Formen unter diesen Schuh. Bilder ändern ihre Farbe je nach ihren Eltern. Und danach behalten Sie Eigenschaft der Ebenenunschärfe bei etwa vier. nun links und rechts dieser Bilder zwei Karussells hinzu. Danach werden wir die Glaubwürdigkeit erhöhen, sodass wir Logos verschiedener Logos verschiedener Unternehmen hinzufügen möchten . Platzieren Sie die Logos hier einfach mit gleichem Abstand. Zeichnen Sie danach ein Rechteck von etwa 11, 20 über diese Logos. Behalten Sie die graue Farbe des Rechtecks aus unserer Farbpalette bei. Verkettet die Farbe des Rechtecks mit linearen Grauverlauf. Wählen Sie nun die Rechtecke und das Logo aus, indem Sie oben auf diese Maskenschaltfläche klicken. Sie können Strg plus Alt plus n auf der Tastatur drücken. Und so gestaltest du einen Heldenbereich einer Landingpage mit der richtigen Wertepräposition, einem klaren Bild, einem markanten CTA und mit der richtigen Authentizität und Glaubwürdigkeit. Das ist also alles für dieses Video. Wir sehen uns im nächsten Video. 6. Generische Testimonials Abschnitt UI: In diesem Video werden wir einen generischen Testimonial-Bereich entwerfen, der die Glaubwürdigkeit unserer Landingpage erhöhen wird. Fügen Sie hier also zunächst einen Titel mit einer Größe von 64 Pixeln hinzu. Und platzieren Sie diesen Titel über diesen internen acht Spalten. Danach DrawRectangle von etwa 11, 20 mal 640 mit einem Randradius von 12 Pixeln. In diesem Rechteck fügen wir dazu ein Video-Testimonial hinzu. Nimm einfach das Bild aus den Übungsdateien und platziere es in dieses Rechteck. Zeichnen Sie nun einfach eine Ellipse von 124 124 über dieses Rechteck und ändern Sie seine Farbe in Rot. Fügen Sie nun ein Abspielsymbol über dieser Ellipse hinzu. Richten Sie sie richtig aus, um diese Wiedergabetaste sichtbarer zu machen . Fügen Sie diesem Bild einfach eine 24-prozentige Deckkraftschicht hinzu. Die Play-Schaltfläche sieht also prominenter aus. Danach fügen wir diesem Bild zwei Testimonials hinzu. Zeichnen Sie kein Rechteck, ändern Sie seinen Randradius auf 14 und fügen Sie ein CR7-Bild darüber hinzu. Nehmen Sie anschließend eine Testimonial-Form aus den Übungsdateien, platzieren Sie sie hier und fügen Sie etwas Text darüber hinzu. Nehmen wir an, sieh mir zu, wie ich meine 100 scrolle. Es sieht also aus wie ein Zeugnis. Nehmen Sie danach das Stiftwerkzeug und zeichnen Sie eine Linie, die auf unser Video zeigt. Ändere seine Farbe in Gelb. So wird die Aufmerksamkeit des Benutzers auf das Video gelenkt. nun einfach auf dieses obige Testimonial und platzieren Sie es unten rechts im Bild Ändern Sie die Farbe in Blau und ändern Sie auch den Text. Jetzt ist unser Abschnitt mit der richtigen SEO-Optimierungstechnik abgeschlossen. Das ist Glaubwürdigkeit. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 7. Vorteile Abschnitt UI: In diesem Video werden wir uns mit den Vorteilen unserer Landingpage befassen. Denn bei Landingpages konzentrieren wir uns mehr auf Vorteile als auf Funktionen. Kopieren Sie zunächst die obige Überschrift und verschieben Sie sie nach unten. Der obere Abstand von 160 Pixeln. Denken Sie daran, dass der Abstand zwischen den Abschnitten 160 Pixel und der Abstand innerhalb der Abschnittsüberschriften und des Abschnitts 80 Pixel beträgt. Dies sind die Standards, die wir für Atlantic Beach definiert haben. Fügen Sie danach ein Bild auf der linken Seite des Abschnitts hinzu. Kopiere das Bild aus den Übungsdateien und platziere es hier richtig. Fügen Sie nun zwei Plus-Symbole auf diesen Herrenschuhen hinzu. Diese Plus-Symbole zeigen diese Funktion des Produkts an, wenn ein Benutzer auf dieses Plussymbol klickt. Jetzt fügen wir auf der rechten Seite einen Untertitel hinzu, unsere Beschreibung. Und SATA. den Untertitel auf Medium und seine Größe auf 60, und benennen Sie ihn um, sodass er wie nie zuvor läuft. Jane macht einen Syrien-Test , um die Sammlung anzusehen. Jetzt werden wir hier einige Vorteile hinzufügen. Zeichnen Sie dazu ein Rechteck von etwa 534 mal 170, ändern Sie seinen Randradius auf 20 Pixel, entfernen Sie die Füllung und geben Sie ihm einen roten Strich. Fügen Sie danach eine Trennlinie innerhalb des Schiffes hinzu. Jetzt fügen wir hier zwei Vorteile hinzu. Auf der linken Seite fügen wir einen Leistungsartikel, einen Titel und eine Beschreibung hinzu. Ändern Sie die Titel- und Beschreibungsgröße auf 16. Hier wurde der Titel in No Soul umbenannt. Fügen Sie danach ein Seelensymbol von 28 mal 28 Pixeln in diese Ellipse ein. Kopiere das Symbol aus den Übungsdateien und platziere sie hier und richte sie richtig aus. Verschrotten Sie nicht einfach das Symbol, Titel und die Beschreibung und verschieben Sie es nach rechts und ändern das Symbol, um zu zeigen , dass ich es aus den Übungsdateien kopieren und hier platzieren kann . Benennen Sie danach den Titel in Solid Grid um. Jetzt fügen wir in diesem Abschnitt eine CRO- und Optimierungstechnik hinzu. Zeichnen Sie für Schulden ein Rechteck für vier mal 92 mit einem Randradius von 12 Pixeln. Gib ihm einen Strich in dieser grauen Farbe. Fügen Sie auch einen Schlagschatten dieser Farbe hinzu. In dieses Rechteck fügen wir nun ein Benutzerbild und ein Testimonial hinzu. Zeichne also eine Ellipse von etwa 56 mal 56. Fügen Sie danach ein Benutzerbild in diese Form ein. Kopieren Sie dazu einfach das Bild aus den Übungsdateien und fügen Sie es einfach in diese Form ein. Danach schnappen Sie sich das Texttool und fügen Sie einige Testimonials hinzu. Um es attraktiver zu machen, fügen Sie einfach ein Herzsymbol oben rechts im Rechteck hinzu. Wählen Sie nun einfach den gesamten Text mit seiner Testimonialgruppe aus. Alle zusammen, benennen Sie es in die rechte Spalte um. Machen Sie dasselbe mit dem Bild. Benennen Sie es in die linke Spalte um. Wählen Sie nun diese beiden Spalten aus, richten Sie sie vertikal mittig und platzieren Sie sie mit einem oberen Rand von 80 Pixeln. Das ist also alles für dieses Video. Wir sehen uns im nächsten Video. 8. Ganz neue Tech UI: Willkommen zurück, Schüler. In diesem Video werden wir einen ganz neuen Textbereich erstellen. also zunächst Zeichnen Sie also zunächst einen Rahmen in voller Breite mit einer Höhe von 656 Pixeln. Füllen Sie es mit einer dunklen Farbe aus unserer Palette. den Vorteil, Kopieren Sie anschließend aus dem obigen Abschnitt die rechte Spalte ohne platzieren Sie sie auf der linken Seite des Bildschirms und ändern Sie den Titel in eine völlig neue Technologie. Ändern Sie auch die Beschreibung, CTA, und die Testimonialfarbe in Weiß. Hier. Ersetzen Sie auch das Herzsymbol durch ein Sternsymbol. Alle diese Symbole sind in der Übungsdatei verfügbar. Nehmen Sie anschließend das Bild aus den Übungsdateien und platzieren Sie es auf der rechten Seite des Banners. Denn unser Produkt sind Schuhe. Schneide das Bild einfach zu und konzentriere dich auf die Schuhe. Danach. Füge Plus-Symbole über diesen Schuhen und einigen Kurven hinzu. die Kurven mit einem Stift und behalten Sie sie bei einer Kapazität von 50% weiß. Zeichnen Sie abschließend eine Ellipse mit einer geraden Linie darüber. Ändere die Farben auf Rot. Und ändere diese Zeile. Und ändern Sie diese Linie: Unterer Pfeil den Kontureigenschaften. Es wird also wie eine Scroll-Down-Option aussehen. Und jetzt ist unser Textbereich abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 9. Maßgeschneiderte Schuhe Abschnitt UI: In diesem Video werden wir deinen Schuhbereich erstellen und anpassen. Kopieren Sie zunächst den oberen linken Spaltenabschnitt und verschieben ihn mit einem Abstand von 80 Pixeln nach unten Ändern Sie den Titel und die Beschreibung. Und im CTA, bei einer Glaubwürdigkeitserklärung von 100 Prozent anders , wenn nicht sogar in 48 Stunden Rasierarbeit, Symbol links neben dieser Aussage. Kopieren Sie, dass ich die Übungsdateien erstellen kann und platzieren Sie sie ordnungsgemäß hier. Ändern Sie danach auch dieses Zeugnis. Jetzt fügen wir auf der rechten Seite verschiedene Größen und Farben eines Schuhs hinzu. also oben rechts die Wählen Sie also oben rechts die Größe mit einem Drop-down-Menü darunter aus, fügen Sie ein Rechteck von etwa 48 mal 64 hinzu, entfernen Sie die Füllung und geben Sie ihm einen Strich in dieser dunklen Farbe mit einer Deckkraft von zehn Prozent. Geben Sie ihm einen Randradius von etwa acht Pixeln. Und um es glatter zu machen, klicken Sie einfach auf diese drei Punkte und ändern Sie die Glättungseigenschaft der Ecken auf 100 Prozent. Jetzt füge hier die Größe hinzu. Nehmen wir an, gruppieren Sie diese beiden Ebenen und erstellen Sie drei Kopien davon und ändern Sie auch ihre Größe. Wählen Sie danach die Site-Ebene aus und verschieben Sie sie mit einem Abstand von 40 Pixeln nach unten. Benennen Sie den Text um, um eine Farbe auszuwählen. Zeichne jetzt einfach eine Ellipse von 53 mal 53. In dieser Ellipse. Erstellen Sie erneut eine Ellipse von 38 mal 30 Pixeln. Gib ihm einen weißen Strich. Richten Sie diese beiden Ellipsen aneinander aus. Erstellen Sie nun drei Kopien davon und verschieben Sie es nach rechts. Ändern Sie diese für die Ellipsenfarbe nicht in zufällige Farben. Danach fügen wir unser Bild hinzu. Also kopiere einfach das Bild aus den Übungsdateien und platziere es hier in der Mitte. Lassen Sie nicht einfach den Stift drücken und machen Sie einen Kreis um den Schuh. Der Schuh. Und David färbt neu. Fügen Sie danach eine rote Ellipse von 75 mal 75 Pixeln mit einem 360-Grad-Symbol darüber hinzu. Und platziere es in der Mitte. So weiß ein Benutzer, dass er den Schuh an zwei Pfeilen rechts und links am Schuh in 360 Grad sehen kann an zwei Pfeilen rechts und links am Schuh in 360 Grad , sodass der Benutzer weiß , dass er scrollbar ist. Jetzt fügen wir diesem Abschnitt eine Technik zur CRO-Optimierung hinzu. Fügen Sie zunächst eine Cristiano Ronaldo-Signatur über dem Schuh hinzu. Drücken Sie dann die T-Taste und schreiben Sie auf jedes Paar ein exklusives CR7-Autogramm. Das Telefon sollte 16 hell und rot sein. Danach fügen Sie hier einen CTA, Skewed Payment Patches hinzu. Also kopiere einfach den CDA mit den gehäuften Zahlungsseiten aus der Helden-Sektion und platziere ihn hier. Ändern Sie die Ausrichtung der SQL-Zahlungsbeeren auf mittig ausgerichtet. Fügen Sie danach einen Pfeil hinzu, kopieren Sie den Pfeil aus unserem zweiten Abschnitt, fügen Sie ihn hier ein und drehen Sie ihn horizontal. Füge nun hier die Fieber-Symbole hinzu, kopiere die FIFA-Symbole aus Übungsdateien und platziere sie hier. Zum Schluss fügen Sie hier eine Textebene mit einer Größe von 24 Pixeln hinzu und benennen Sie sie in unsere offiziellen Partner um. So wird der Benutzer wissen, dass die FIFA unser offizieller Partner ist. Der Abstand, den ich auf unserer Landingpage verwende , beträgt acht Pixel. Es bedeutet also, dass wir Leerzeichen verwenden , die im Vielfachen von Acht liegen. Und jetzt ist ein Abschnitt abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 10. Unsere Sammlung Abschnitt UI: In diesem Video erstellen wir unseren Sammlungsbereich. Kopieren Sie zunächst diese Hauptüberschrift von 64 Pixeln. Platzieren Sie es hier mit einem oberen Abstand von 160 Pixeln. Benennen Sie es in unsere Sammlung um. Es sollte auf vier Spalten platziert werden. Lebe von der Kolumne. Danach eine Beschreibung der Anzeige in den anderen sieben Spalten. Jetzt werden wir hier einige Kategorien hinzufügen. Zeichnen Sie zunächst ein Rechteck von etwa 15 mal 60 Pixeln. Randradius von 12 Pixeln. Machen Sie auch die Ecke glatt, indem Sie auf diese drei Punkte klicken. Gib ihm einen Strich in dieser grauen Farbe. Jetzt fügen Schädlinge, die es tun und Trends schreiben, auch ein Trainingssymbol hinzu . All diese Symbole sind in den Übungsdateien verfügbar. Erstellen Sie nun drei Kopien davon und platzieren Sie sie in gleichem Abstand Ändern Sie auch ihre Namen und Symbole. Um nun diese Vorlesungsstatuskette von der ersten rechteckigen Farbe nach Rot deren Text nach Weiß zu ändern, sodass der Benutzer weiß, dass dieser Status gerade ausgewählt ist. Jetzt werden wir hier verschiedene Produkte hinzufügen. also zunächst Zeichnen Sie also zunächst ein Rechteck von etwa 357 bei 03:45 Pixeln mit einem Randradius von acht Pixeln. Macht auch glatt gelaufen. 200 Prozent. Ändere seine Farbe in diese graue Farbe. Das Ei und Nike und ein Lieblingssymbol auf diesem Einkaufswagen auf einem Schuhbild in der Mitte dieser Karte. Um es hinzuzufügen, passen Sie es an dieses Bild an, um einen besseren Schlagschatten zu erzielen. Fügen Sie nun Benutzerlesestern, Produktnamen, Produkt, alten Preis und neuen Produktpreis eines Rabatts hinzu, um Dringlichkeit in den Ansichtsdetails des Kunden zu erhöhen, CTA auf der linken Seite dieser Karte und auf der rechten Seite an einem Mengenzähler und einem Warenkorbsymbol mit dunkelgrauem Hintergrund. Um uns Zeit zu sparen, werden wir diese Karte replizieren und fünf Kopien davon anfertigen und sie richtig platzieren. Danach ändern wir die Produktbilder und die Farbe dieser Karten, sodass sie möglicherweise anders aussehen. Also von hier an werde ich den Prozess nur noch beschleunigen, um zu sagen, die ganze Zeit. Und jetzt haben wir alle unsere Karten gemacht und unser Sammlungsbereich ist abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 11. Instagram Testimonial Section UI: Willkommen zurück, Schüler. In diesem Video werden wir einen Testimonial-Bereich für Instagram erstellen . Lassen Sie mich Ihnen zunächst einen kurzen Überblick über die Testimonials geben . Testimonials sind eine Art sozialer Beweis, der dem Besucher zeigt, dass Menschen mit dem gleichen Schmerz oder Vertrauen unser Produkt genießen. Landingpage. Testimonials sind nicht ohne Grund wirksam. Ich mag Verkaufsgespräche. Testimonials sind unvoreingenommen, was es Ihrem Unternehmen erleichtert, Glaubwürdigkeit aufzubauen und das Vertrauen in die Angebote von Atlantic Beach zu stärken. Tatsächlich zeigen Studien, dass glaubwürdige Testimonials die Kaufabsicht um mehr als 92 Prozent erhöhen. Gehen wir also zu unserer Landingpage und fangen wir an, ein Testimonial von Instagram zu erstellen. Fügen Sie zunächst eine Überschrift hinzu. Nehmen wir an, statt davon in der linken Spalte besessen zu sein, erstellen wir unsere Instanzkarte. Zeichnen Sie dazu ein Rechteck mit einer Größe von 98 mal 640 Pixeln. Gib mir den Eckradius von 60 Pixeln. anschließend auf dieser Karte Fügen Sie anschließend auf dieser Karte ein Benutzerbild mit einem Benutzernamen und dessen Standort hinzu. Fügen Sie auch ein Drei-Punkt-Karussell, genau wie auf Instagram, vor diesem Benutzerbild hinzu. Fügen Sie danach ein Hauptbild von etwa 442 mal 386 Pixeln mit einem Eckradius von 20 Pixeln hinzu. Auch hier wurde die Ecke glatt gemacht. nun unter diesem Bild Fügen Sie nun unter diesem Bild einen „Gefällt mir“ -Kommentar, Teilen und ein Lesezeichensymbol hinzu. Schreiben Sie danach eine Textzeile wie von Lucas und 903 anderen davor. An der TU, die Bilder. Danach fügen Sie ein prominentes Hauptzeugnis mit einem Datum darunter hinzu. Jetzt ist unsere linke Spalte vollständig. Gehen wir zur rechten Spalte dieses Abschnitts über. Fügen Sie in der rechten Spalte Hauptüberschrift und den Untertitel eines Testimonials hinzu. Danach bei Trust Pilot Patch mit Benutzerbewertung in Sternen. Mit Benutzerbewertungssternen, dann einer Benutzerempfehlung. Fügen Sie danach die Signatur eines Benutzers hinzu, zertifizierten Shu-Level-Patch. Gerate nicht in Panik. All diese Dinge sind in den Übungsdateien verfügbar. Fügen Sie abschließend Testpilotrezensionen unter Versand hinzu. Kopiere den Beutel aus den Übungsdateien und lege ihn hier ab. Letzt fügen Sie einfach „In den Warenkorb Hier finden Sie aufgespießte Zahlungsseiten. Kopiere das einfach aus dem obigen Abschnitt und platziere es hier in der Mitte mit einem Abstand von 80 Pixeln, nicht alle richtig ausrichten, und unsere Sitzung ist abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 12. Allgemeines Zeugnis mit der FIFA Banner UI: In diesem Video werden wir ein FIFA-Banner mit allgemeinen Testimonials erstellen . Zeichnen Sie also zuerst unser Rechteck von etwa 11, 20 mal 248. Geben Sie diesem die rote radiale Farbe. Danach fügen Sie eine Überschrift und eine Beschreibung hinzu. Füge hier genug CDs hinzu. Jetzt füge ich hier drei Bilder hinzu. Also links beim FIFA Cup und rechts Fußball mit Netzbild. Kopiere diese Bilder aus den Übungsdateien und platziere sie richtig hier. Gehen wir nun nach unten und fügen eine Überschrift mit einem oberen Abstand von 160 Pixeln hinzu. Benennen Sie es in einige zufriedene Geschichten um. Fügen Sie danach Benutzerlesestern unter dieser Überschrift hinzu. Lassen Sie uns nun ein Rechteck von etwa 14, 40 mal 960 Pixeln zeichnen. Ändern Sie seine Farbe in diese hellgraue Farbe. Danach werden wir hier einige User Stories hinzufügen. Zeichne dafür also ein Rechteck von etwa 358 mal früher neun Pixeln. Ändere seine Farbe in Weiß. Ändern Sie auch die Ecke in eine glatte Ecke, indem Sie auf diese drei Punkte klicken. Zeichne jetzt einen weiteren Rahmen. Innerhalb dieses Rahmens von etwa 333 mal 2,4 Pixeln mit einem Randradius von sechs Pixeln. Der Randradius des äußeren Rahmens sollte dagegen 12 Pixel betragen. Es sieht also ästhetisch ansprechend aus. Hier. Jane, dieser innere Rahmen ist grau gefärbt. Da wir hier einige Bilder hinzufügen werden, füge ein Benutzerbild, einen Benutzernamen und ein von unserem Stapel verifiziertes Bild hinzu. Danach bei der Nutzerbewertung Sterne und ein Testimonial darunter. nun auf der rechten Seite Fügen Sie nun auf der rechten Seite einige umgekehrte Kommas hinzu. Es sah also aus wie ein Testimonial. Machen Sie zwei Kopien davon und platzieren Sie sie in gleichem Abstand. Danach die Bilder und der Benutzername und auch die Bilder. Fügen Sie hier auch die Pfeile nach links und rechts hinzu, sodass eine Ellipse von 40 mal 40 entsteht. Ändern Sie die Farbe in Weiß und fügen Sie einen roten Linkspfeil hinzu. Erstellen Sie nun ein Duplikat davon und verschieben Sie es nach rechts. Ändern Sie die Abstraktion, um auch zu schreiben. nun unter diesem Testimonial Fügen Sie nun unter diesem Testimonial eine Trennlinie hinzu. Also werde ich hier einige Statistiken zeigen. Zeichnen Sie zunächst ein Rechteck auf 61 mal 224 mit einem Randradius von 12 Pixeln. Geben Sie diesem einen Strich von einem Pixel grauer Farbe. Danach fügen Sie Benutzerbewertungssterne und die Gesamtzahl der Bewertungen hinzu. In der Mitte fügen wir nun einige prozentuale Fortschrittsbalken hinzu. also zunächst Fügen Sie also zunächst eine Textebene mit fünf Sternen hinzu. Davor. Fügen Sie ein Rechteck von etwa 402 mal 18 mit einem Randradius von vier Pixeln hinzu. Duplizieren Sie es und ändern Sie seine Farbe in Grün Seine Breite sollte 361 betragen. Danach mit einem 80-prozentigen Etikett drauf. vor diesem Fortschrittsbalken Fügen Sie vor diesem Fortschrittsbalken eine Ebene mit 10,5 K X entspricht der Gesamtzahl der Benutzer, die eine Fünf-Sterne-Bewertung abgegeben haben. Erstellen Sie nun vier Kopien dieses Fortschrittsbalkens und ändern Sie auch ihre Farbe und die X-Beschriftungen. Abschließend, auf der rechten Seite, duplizieren Sie dieses linke Feld hier bei einem weltweiten Produktverkauf von mehr als acht Millionen Produkten pro Jahr. Und ihr beide Sterne auch. Client, diese Textebene richtig, richten Sie diese Textebenen richtig an diesem Feld aus. Das ist also alles für dieses Video. sehen uns im nächsten Video, wir werden entwerfen, was in der Box ist. 13. Was du in deiner order hast?: Willkommen zurück. In diesem Video werden wir den Abschnitt „Was in der Box“ enthalten ist, erstellen. also zunächst Fügen Sie also zunächst eine Überschrift mit einem oberen Abstand von 160 Pixeln hinzu. Benennen Sie es um in. Hier ist , was in der Box ist. Zeichnen Sie danach einen Rahmen von 11, 20 mal 891. Geben Sie diesem einen Strich mit dieser roten Farbe und eine Füllfarbe mit einer Deckkraft von 30%. der linken Spalte fügen wir das Hauptbild und einige Bilder hinzu. Kopiere die Unterbilder aus dem Heldenbereich und füge sie hier vertikal ein und passe die Größe entsprechend an. Zeichnen Sie danach einen Rahmen um 4306504, ändern Sie seinen Randradius auf 2010 und seine Farbe auf Rot. Machen Sie auch die Ecke glatt. Fügen Sie anschließend ein Hauptbild hinzu, kopieren Sie dieses Bild aus den Übungsdateien, platzieren Sie es hier und richten Sie es korrekt aus. Jetzt fügen wir in der rechten Spalte einige Details zu unserem Produkt hinzu. Zuerst bei einem Produktnamen, dann Benutzerbewertung, Sternen, Gesamtpreis und Neupreis. Danach fügen Sie die Drop-down-Liste „Farbe“ und „Größe“ hinzu. Danach fügen wir einen ausgewählten Mengenzähler hinzu. Dafür. Zeichne eine graue Linie und mache ein Duplikat davon. Ändern Sie die Farbe der obigen Linie in Rot. danach bei einer Ellipse von 14 mal 14 Pixeln Ändern Sie danach bei einer Ellipse von 14 mal 14 Pixeln auch die Farbe in Grau. Erstellen Sie ein Duplikat dieser Ellipse, verschieben Sie sie nach rechts und ändern Sie ihre Farbe in Rot. Geben Sie ihm einen Strich von einem Pixel weißer Farbe. Hier. Geben Sie ihm auch auf seiner Y-Achse einen schwarzen Schlagschatten . Es sieht also realistischer aus. Fügen Sie auch hier eine T-Mengen-Textebene Änderungen enthält, wenn ein Benutzer ändert, wird Liter Mengenzähler. Jetzt fügen wir hier einen CTA hinzu. Also kopiere einfach das CDF aus dem Hero-Bereich und füge es hier ein. Mach es in voller Breite. Wenn Sie den Preis verschieben und Text und das Symbol zum Löschen in der Mitte dieser Schaltfläche platzieren . Unter dieser Schaltfläche möchten wir eine schnelle Lieferung sowie eine Notiz und einen Sicherheitsstapel hinzufügen . Kopiere das aus den Übungsdateien und platziere es hier richtig mit dem richtigen Abstand. Danach fügen wir dafür ein Banner hinzu. Zeichne einen Rahmen von 941 mal 188 Pixeln. Lassen Sie uns mit einem Gespräch über den Abstand der ATP-Zellen beginnen. Ändern Sie den Eckradius auf 20 Pixel. Farben sollten gelesen werden. Jetzt zu den Lieferinformationen hier. Also kopiere das aus den Übungsdateien und platziere es hier richtig mit gleichem Abstand. Jetzt ist unser Worst-in-the-Box-Abschnitt abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. Wir werden einen FAQ-Bereich für unsere Landingpage entwerfen. 14. FAQs mit Footer Section UI: Willkommen zurück, Schüler. In diesem Video erstellen wir einen FAQ-Bereich mit einem Fußzeilenbereich. Sie kopieren zunächst die obige Abschnittsüberschrift und platzieren sie hier mit dem oberen Rand auf 160 Pixeln, die wir zuvor definiert haben. Füge eine Beschreibung vor diesem Text hinzu. Lassen Sie uns danach nach unten gehen und mit der Erstellung von FAQs beginnen. also zunächst Zeichnen Sie also zunächst ein Rechteck von etwa 548 64 und ändern Sie seinen Eckradius auf sechs Pixel Geben Sie ihm auch einen Strich von einem Pixel roter Farbe. Drücken Sie nun die T-Taste und schreiben Sie die erste Frage. Sagen wir Schaden und wir lassen live Frage wiederholen, warum die Schriftstärke auf mittel geändert wird und die Farbe zu dieser dunklen Farbe einen Dropdown-Pfeil davor abspielt. Kopiere das aus den Übungsdateien und lege es richtig hier ab. Gruppieren Sie nun diese drei Ebenen und erstellen Sie sieben Kopien davon. Segne sie mit einem gleichen Abstand von 40 Pixeln. Jetzt werden wir die Fragen hier ändern, da es ein langwieriger Prozess ist. Also beschleunige ich den Prozess hier. Jetzt ist der FAQ-Bereich abgeschlossen. Gehen wir zum letzten und letzten Abschnitt dieser Landingpage über, dem Fußzeilenbereich. Lassen Sie uns dafür einen Rahmen von etwa 14, 42 mal 292 zeichnen. Ändere seine Farbe in schwarze Farbe. Fügen Sie nun auf der linken Seite ein Dummy-Logo, einige Beschreibungen und Social-Media-Symbole hinzu. Diese sind alle in den Übungsdateien verfügbar. Platziere sie hier. Eigentum. Drücken Sie nun die T-Taste, Android eine Überschrift. Und einige Links hier, etwa drei bis vier Links. Gruppieren Sie diese drei Ebenen und duplizieren Sie sie dreimal. Jetzt werden wir diese Überschriftenenden umbenennen. Von hier aus beschleunige ich den Prozess hier nur. Fügen Sie anschließend in der Mitte dieser Sitzung ein Bild mit einem Schuhmuster hinzu. Kopieren Sie das einfach aus den Übungsdateien und platzieren Sie es hier mit einer Deckkraft von 8%. Zeichnen Sie abschließend ein Rechteck von 14, 40 mal 50, um seine Farbe in Rot zu ändern. Drücken Sie abschließend die T-Taste und schreiben Sie einfach Copyright. Und in Ordnung, Reservetext. Richten Sie die Mitte an diesem roten Rechteck aus. Jetzt sind unsere Landingpages fertiggestellt. Wir sehen uns im nächsten Video. Wir werden eine responsive Version der Landingpage entwerfen. 15. Responsive Version UI Design: Willkommen zurück, Schüler. In diesem Video werden wir responsiv gestalten und eine Landingpage anbieten. Zunächst werde ich Sie über die Regeln für unseren Responsive-Bereich informieren . Nehmen wir einen Frame des iPhone Pro Max. Dies ist möglich, indem Sie die F-Taste auf Ihrer Tastatur drücken und diesen iPhone-Rahmen auswählen. Danach richten wir unser Raster ein und die Lineale sind dafür verantwortlich. Für diese responsive Version. Wir werden die Standards von iOS verwenden. Klicken wir zunächst auf diesen Rahmen und dann auf dieses Plus-Symbol im Ebenenfenster. Danach klicken Sie auf diese drei Punkte. Und von hier aus wählen Sie Spalten aus Disruptor aus. Die meisten von euch wissen, dass wir für mobile Versionen das Spaltenraster verwenden. Schreiben Sie also zunächst einfach vier Spalten in den Spalten-Tab. Danach an den Rändern. Wenn du es nicht weißt, Martin, sind diese Leerzeichen von links und rechts. Diese Leerzeichen im Inneren werden Dachrinnen genannt. Stimmt das? 20. Sie können sich auch für 24 Margen entscheiden. Aber vorerst schreibe ich 20. Und in diesem Krater tippe rechts auf 16. Denken Sie jedoch daran, dass wir auf der Webseite und auf der Seite im oberen Seitenbereich einen Abstand von acht Spalten gewählt haben. Auch in dieser mobilen Arbeit verwenden wir den Abstand von vier Pixeln von vier Pixeln. Ich meine, wir legen den Abstand in ein Vielfaches von vier fest. Und der Abstand, den wir für jeden pH-Wert definiert haben , wird durch zwei geteilt und die ansprechende Version. Das heißt, wenn wir den Abstand zwischen zwei Abschnitten festgelegt haben, 160 Pixel in der Webversion, dann erhalten Sie in der mobilen Version zurück zu. Wir werden also einen Abstand von 80 Pixeln zwischen den Sitzungen auf Mobilgeräten festlegen , da mobile Bildschirme klein sind und wir meinen Abstand auf dem Handy nicht sehen können. Andernfalls muss der Nutzer zu viel scrollen, um zum gewünschten Inhalt zu gelangen und nicht zu testen, was wir wollen. Lassen Sie uns nun ein Lineal für unser Schema festlegen. Drücken Sie also einfach die Tastenkombination Shift R auf Ihrer Tastatur. Und von hier aus, genau wo die Lineale und platziere sie mit dieser Ebene. Danach, für eine vertikale Kopfzeile, nur für ein Rechteck mit etwa 60 Pixeln und platzieren Sie ein Lineal entsprechend. Hier platzieren wir unseren Header-Bereich. Löschen Sie danach dieses Rechteck und beginnen wir mit der Erstellung unseres Headers. Kopieren Sie also zunächst das Logo, das Warenkorbsymbol und das Menü. Ich kann die Landingpage erstellen und hier einfügen. Und heften Sie sie ein wenig fest, damit sie je nach Handybildschirm gut aussehen. Danach gehen wir hier zu unserer Heldenabteilung über. Wählen Sie zunächst diese linke Spalte aus dem Internet aus und fügen Sie sie hier ein. Und pinke sie auch auf ihre Größe. Und platziere sie mit diesen Linealen von links und rechts. Achten Sie auch darauf, dass die Schrift mittig ausgerichtet ist, da dies für kleine Bildschirme praktisch ist. Im Internet können Sie mindestens 60 Pixel oder Subtext verwenden. Aber auf dem Handy kannst du zu mindestens Pixeln gehen. Aber lassen Sie uns vorerst bei 64 Mobile SetText bleiben . Lassen Sie uns danach nach unten gehen. Und hier bei unserem Hauptbild. Kopiere das von der Landingpage mit all dem Zeug drum herum und platziere es hier und passt es an unsere Note an. Kopieren Sie anschließend diesen Dropdown-CTA und die Zeugnisdetails und platzieren Sie sie richtig hier. Ändern die Ausrichtung so, dass sie horizontal zentriert ist. Kopieren Sie abschließend diese Kundenlogos und platzieren Sie sie ebenfalls hier. Jetzt ist der erste Abschnitt abgeschlossen. Lassen Sie uns zu unserem nächsten Abschnitt übergehen. Hier. Fügen Sie zunächst eine Überschrift hinzu, kopieren Sie also einfach die Überschrift auf die Landingpage und ändern Sie die Größe auf 48 Kugeln und platzieren Sie sie hier mit einem oberen Rand von 80 Pixeln. Denken Sie daran, dass bei mobilen Bildschirmen der Abstand zwischen zwei Abschnitten zur Hälfte wird. Nehmen wir an, wenn der Abstand zwischen zwei Abschnitten auf der Abbildung 160 Pixel beträgt , sollte er auf mobilen Bildschirmen 80 Pixel betragen. Zeichnen Sie danach einen Rahmen von etwa 388 mal 340. Ändert seinen Eckenradius. Zwei Zwecke. Kopieren Sie anschließend das Bild von der Landingpage und platzieren Sie es hier, indem Sie die Tastenkombination Alt V drücken . Kopieren Sie anschließend die Wiedergabetaste und das Testimonial und platzieren Sie es ordnungsgemäß über diesem Bild. Wählen Sie nun diese Testimonials mit diesem Bild aus und gruppieren Sie sie, indem Sie Strg G über Ihre Tastatur drücken. Und danach platzieren Sie es mit einem oberen Abstand von 40 Pixeln. Lass uns jetzt hier runter gehen. Fügen Sie eine Überschrift hinzu. Kopieren Sie die Überschrift auf der Landingpage, fügen Sie sie hier ein, ändern Sie die Größe auf 48 und platzieren Sie sie im oberen Abstand von 80 Pixeln. Fügen Sie danach ein Benutzerbild hinzu, kopieren Sie dieses Bild von der Landingpage und platzieren Sie es hier, indem Sie die Größe in der Mitte ändern. Wählen Sie danach die Details der rechten Spalte und platzieren Sie sie nacheinander unter diesem Bild. Denken Sie jedoch daran, die Größe entsprechend zu ändern. Lass uns jetzt hier runter gehen. Zeichne einen Rahmen von 428 mal 945 und ändere seine Farbe in schwarze Farbe. danach zunächst dieses Fügen Sie danach zunächst dieses Bild in der rechten Spalte diesem Rahmen hinzu und ändern Sie die Größe entsprechend. nun unter diesem Bild Wählen Sie nun unter diesem Bild die Details der linken Spalte und platzieren Sie sie entsprechend. Denken Sie daran, dass unsere Überschrift 48 sein sollte, die Beschreibung sollte 16 leicht sein, CTA sollte 20 normal sein. Und überlasse das Zeugnis vier bis 16. Lass uns nun nach unten gehen, um deine Schuhsession hier individuell zu gestalten. Zuallererst unter Abschnittsüberschrift, Beschreibung, dieser linken Spalte und diesen Spaltendetails. Nach dieser Anzeige Bild anzeigen und verkleinern. Fügen Sie diese 360-Grad-Icons und den CTA hinzu, für Logos beliebig ist, alles ebenfalls. Denken Sie daran, dass das Ding, das wir im Web platziert haben , in einer responsiven Ansicht zur Mittellinie geändert wird. Aber es ist nicht verpflichtend. Wie auch immer, lassen Sie uns zum nächsten Abschnitt übergehen , unserem Sammlungsbereich. Fügen Sie hier einen Titel, einige Beschreibung, Kategorien, Schritte hinzu. Danach. Füge Schuhkarten vertikal hinzu. Füge hier einfach drei Karten hinzu. Füge hier vorerst einfach drei Autos hinzu. Fügen Sie danach nach der dritten Karte ein Testament für alle CDA hinzu, sodass der Benutzer es leicht sehen kann , anstatt sie vollständig durchblättern zu müssen. Lassen Sie uns nun zu unserem nächsten Abschnitt übergehen, dem Bereich Testimonials. Hier. Fügen Sie zunächst eine Überschrift hinzu. Danach. diese Karte in der linken Spalte Verkleinern Sie diese Karte in der linken Spalte auf etwa vier Spalten. Jetzt fügen wir unser FIFA-Banner hinzu, so wie möglich. Wir möchten diese Sitzung anpassen um all die Dinge aus dem Internet auf mobilen Bildschirmen zu präsentieren . Hier. Zeichne einfach ein Rechteck um 36 536 und ändere seine Farbe in einen linearen Farbverlauf. Wählen Sie dazu einfach diesen Frame aus dem Web aus. Drücken Sie Strg-Alt-Z und füllen Sie diesen Frame auf Handy, indem Sie Strg-Alt V drücken. Danach fügen Sie eine Überschriftenbeschreibung und einen CTA vertikal mit gleichem Abstand hinzu. Kopieren Sie abschließend dieses FIFA-Symbol. Lassen Sie uns hier sitzen und die Größe so ändern, dass es eine Vier mal 241 ergibt , und richten Sie die Mitte horizontal aus. Gruppiere sie nun alle zusammen. Lassen Sie uns hier zum nächsten Abschnitt übergehen. In der Abschnittsüberschrift werden diese Benutzerbewertung mit Sternen und Rezensionen bewertet. Danach fügen wir hier eine Karte hinzu. Kopieren Sie also einfach die Karte aus dem WebView und platzieren Sie sie hier Ändern Sie die Größe auf vier Spalten über dieser Karte und die Pfeile nach links und rechts in der Mitte. Das einzige, was ich vergessen habe hinzuzufügen, ist der hellgraue Hintergrund. Also füge einfach einen hellgrauen Hintergrund hinter dieser Karte und Pfeile hinzu. Danach. Nach dieser Karte fügen wir die Benutzerbewertungskarte und die Karten für den Gesamtverkauf pro Jahr hinzu. Kopiere sie einfach aus dem WebView und platziere sie hier auf 2,2 Spalten. Lassen Sie uns nun zum Abschnitt „Was in der Box“ steht, gehen wir hier runter. Fügen Sie zunächst eine Abschnittsüberschrift hinzu. Danach bei diesem Hauptbild auf diesen vier Spalten. Fügen Sie hier diese anderen Schuhbilder unter diesem Hauptbild hinzu. Wählen Sie nun diese rechten Spaltendetails und platzieren Sie sie entsprechend hier. Danach passen wir dieses Banner an. Zeichnen Sie also zunächst ein Rechteck für 23, 44. Hier bei diesen Versand - und Schriftdetails, das Layout von 2,2 Spalten und deren Größe entsprechend dem mobilen Bildschirm anpassen. Ändern Sie z. B. diesen kostenlosen Versandtext auf 16 Medium und die Beschreibung auf 14 fehlt. Nachdem Sie diese Versanddetails eingegeben haben, drücken Sie zuerst die L-Taste auf der Tastatur und zeichnen Sie gegen Abend, drei, die Geschwindigkeit auf 0,5 Pixel und die Farbe auf weiße, lineare Farbe. Und platzieren Sie es in der Mitte dieser linken und rechten Spalte, damit es unterscheiden kann. Können Sie also zwischen diesen beiden Spalten unterscheiden ? Gehen wir nun zum FAQ-Bereich über. Hier bei dem Abschnittsnamen und der Beschreibung. Wählen Sie danach diese erste Frage aus dem Internet aus. Platzieren Sie es auf diesem mobilen Bildschirm für Spalten. Ändern Sie die Größe des Fragetextes auf 16 Medium und ändern Sie auch diese Pfeilposition. Machen Sie jetzt sechs Kopien davon. Erste Frage. Duplizieren Sie sie mit einem Abstand der Pixel zwischen ihnen. Ändern Sie nicht nur den Text dieser Fragen. Jetzt ist unser FAQ-Bereich abgeschlossen. Lassen Sie uns zu unserem letzten Abschnitt dieser Landing-Page-Verantwortung übergehen . Hier. Zeichnen Sie zunächst ein schwarzes Rechteck von 14428 im Alter von 74 Jahren. Danach bei Ihrer lokalen Beschreibung von etwa zwei Zeilen. Platzieren Sie anschließend diese vierspaltigen Links im Format von 2,2 Spalten auf Responsive Dringend. Fügen Sie abschließend diese Social-Media-Symbole nach diesen Dingen hinzu. Und hier zeichnen Sie ein Rechteck von etwa 28 mal 50 Pixeln. Ändere seine Farbe in Rot. Und wähle diesen, okay, seinen eigenen Text aus und füge ihn in dieses rote Rechteck ein. Und richte deine Mitte vertikal und horizontal aus. Jetzt ist unsere Landingpage, Responsible Agent, fertig. So erstellen Sie eine Landingpage mit ihrer responsiven Version mit ihrer responsiven Version mit richtigen CRO- und Optimierungstechniken. Das ist alles für dieses Video. Ich hoffe, du findest diesen Kurs hilfreich und wir sehen uns in einem anderen Figma-Kurs. Danke, dass du dir diesen Kurs angesehen hast.