So erstellst du eine benutzerdefinierte, verfolgbare Instagram (Link in Bio) Link Landing-Page

1. So erstellst du eine Instagram-Link mit der Intro: In diesem Kurs werde ich Ihnen beibringen, wie Sie eine dieser Link-Seiten erstellen , die Sie in der Bio eines Instagramer finden. Ich benutze die via Kalligraphie-Seite als Beispiel. Sie können sehen, dass Linktree diese Art von Service hat. Leider erhalten Sie ihr Logo und Sie sind nicht in der Lage, sehr viel auf der Seite zu ändern. Also werde ich Ihnen zeigen, wie Sie Ihre eigenen machen können, und es wird ähnlich aussehen, was ich auf meinem Profil habe. Ich werde nur das Instagram-Profil von Sarah Types aufrufen und auf den Link und meine Bio klicken. Es ist auch gut, weil Sie den gebrandeten Link haben. Also meins sagt sarahtypes.shop. Wenn es geladen wird, habe ich mein Logo da oben. Ich habe auch meine Links und ich habe Link-Tracker auf allen Buttons. Dies wird mir einen Einblick geben, welche Links besser funktionieren. Sie müssen kein Experte in der Codierung sein, grundlegende Hintergrund ist hilfreich, aber nicht notwendig. Ich werde Ihnen jeden Schritt zeigen, wie Sie das selbst erstellen und in Ihr Instagram-Profil hochladen können . 2. Was du brauchst, um eine Instagram-Link zu erstellen: Okay, also zuerst brauchst du eine Domain. Sie können zu vielen verschiedenen Domain-Unternehmen gehen. Ich benutze im Moment DreamHost, also bin ich bei dreamhost.com. Sie können ihre Suchleiste auf der Hauptseite verwenden um eine Domain zu finden, die mit Ihrem Profil funktioniert. Wenn es genommen wird, gibt es andere Optionen , die sie mit verschiedenen Endungen anstelle von dot com vorschlagen. Ich habe sarahtypes.shop genommen, nur um meine Bio auf Instagram zu setzen, also ist es kürzer als der vollständige Link. Sie werden auch Hosting benötigen. Wie Sie sehen können, werde ich durch ihre Hosting gehen und es sind ungefähr $10 pro Monat. Es gibt viele verschiedene Möglichkeiten, wie Sie Hosting von verschiedenen Websites erhalten können. Wenn Sie nicht wissen, wie man Hosting oder eine Domain einrichten, schlage ich vor, dass Sie meine anderen Fähigkeiten teilen Video, wie man eine Hochzeit Website zu erstellen. In den Anfangsphasen dieses Kurses habe ich Ihnen gezeigt, wie Sie tatsächlich das Hosting und die Domain für Ihr Konto auf GoDaddy einrichten können. Das nächste, was Sie brauchen, ist ein FTP-Client. Ich benutze FileZilla, es ist kostenlos und es ist ziemlich einfach zu bedienen. Also, wenn Sie einfach zu FileZilla dash project dot org gehen, können Sie ihre kostenlose Software herunterladen und dann können Sie es mit Ihrem FTP verbinden , indem Sie Ihren Benutzernamen und Ihr Passwort von dem Hosting, das Sie gerade gekauft haben. Manchmal gibt es auch Dateimanager auf Ihrem Hosting-Konto. Wenn dies also zu überwältigend ist, können Sie sich auch einfach bei Ihrem Hosting anmelden und dann den Dateimanager finden, und Sie könnten die Datei, die Sie in diesem Kurs machen, immer auf diese Website hochladen . Sie benötigen auch ein kostenloses Konto von linktrack.info. Dies ermöglicht es Ihnen, alle Links zu verfolgen, die Sie für Ihre Schaltflächen auf Ihrer Zielseite setzen, und dies gibt Ihnen einige Analysen und Einblicke , wie alle Schaltflächen funktionieren und welche besser und falls Sie noch keinen haben, benötigen Sie auch Instagram-Konto, damit Sie diesen Link in die Bio stecken und eine Landingpage mit nur Ihren wichtigsten Links haben können. Das letzte, was Sie brauchen, ist ein Texteditor, so dass Sie die Datei sehen können , die ich Ihnen geben werde, um den HTML herunterzuladen und zu bearbeiten , so dass Sie Ihre eigenen Links erstellen können. Ein kostenloses Beispiel, das Sie wahrscheinlich bereits haben, ist TextEdit auf Ihrem Apple. Wenn Sie das öffnen und zu Einstellungen gehen und Sie sich auf der Registerkarte Neues Dokument befinden, würde ich einfach Text umbrechen deaktivieren und dann auf die Registerkarte Öffnen und Speichern gehen und sicherstellen, dass Sie die HTML-Dateien anzeigen aktiviert haben. Auf diese Weise erhalten Sie den Code und nicht, wie es in einem Webbrowser aussehen würde , und keine Sorge, ich weiß, das sieht überwältigend aus, aber ich werde es mit Ihnen Zeile für Zeile, Schritt für Schritt durchgehen , damit Sie was alles bedeutet, und Sie erhalten eine Arbeitsstelle. 3. Deine HTML-Datei und Design einrichten: Wie ich schon sagte, können Sie dies in Textbearbeitung öffnen. Aber da ich Dream weaver habe, werde ich Dream weaver verwenden, wenn Sie eine Creative Cloud-Lizenz haben, können Sie auch Dream weaver herunterladen, indem Sie diese Lizenz verwenden. Es wird nur ein bisschen einfacher für mich sein, Ihnen den Code zu zeigen weil er verschiedene Farben für verschiedene Klassen usw. hat. Anstelle von Textbearbeitung, die nur schwarz-weiß ist. Wollen Sie sicherstellen, dass Sie das Zeug, das ich gerade hervorheben, nicht berühren , ist das notwendig. Diese eine Zeile skaliert Ihren Browser so ziemlich nach unten, dass es auf Mobilgeräten sichtbar ist, und es verkleinert nicht nur auf eine große Seite. Aber Sie können das Zeug, das ich hier habe, zwischen den Titel-Tags ändern. Dies ist, wo Sie den Titel Ihrer Seite einfügen möchten. So können Sie das in Ihren eigenen Namen ändern. Darunter habe ich einen Link für Google-Schriftarten. Wenn Ihnen die Schriftart, die ich mit diesem Beispiel habe, nicht gefällt, ist es einfach, zu erstellen, was Sie wollen. Wenn Sie auf googlefonts.com gehen, Ich in der Regel nur Google-Fonts auf die Webseite zu bekommen, aber es ist fonts.google.com. Sie können ihre Schriftarten durchsuchen. Sie haben viele verschiedene Beispiele. Ich werde nur schnell zu einer Sans Serif-Schriftart filtern und ich werde einfach Roboto komprimiert wählen. Wenn Sie einfach auf den Pluspfeil klicken, wird es zu Ihrer Bibliothek hinzugefügt, wodurch Sie es in Ihrem Code verwenden können. Sobald du darauf klickst, siehst du das kleine Pop-up unten. Wenn Sie das einfach öffnen, finden Sie den Einbettungscode sowie die Schriftgewichtungen. So klicken Sie auf „Anpassen“ Sie können wählen, was Schriftgewicht Sie verwenden möchten, und Sie werden sehen, dass es Ihre Ladezeit ändert. Das Hinzufügen weiterer Schriftarten wird also eine schwerere Last auf der Website erzeugen. Also werde ich nur das Licht und das Reguläre abnehmen und dann werde ich den Einbettungscode kopieren. Der erste, und das ist derjenige, der den Code ersetzen wird , den ich Ihnen gerade auf der Dream Weaver Seite gezeigt habe. Also werde ich einfach darunter klicken, um Ihnen zu zeigen, dass es das Gleiche ist. Ich werde es dort einfügen, und Sie können sehen, jetzt habe ich zwei verschiedene Schriftarten, also werde ich nur eine loswerden. Das ist alles, was ich tun muss, um die Schriftart zu ändern, außer dass Sie sie im CSS hinzufügen müssen und ich zeige Ihnen das auch. Also dieses Zeug, das ich mittlerweile scrolle, ist dein CSS-Code. Normalerweise ist dies in einer separaten Datei, aber da dies eine so kleine Website ist, halte ich alles nur auf einer Seite für Sie. Der erste Teil ist also Ihr Hintergrundbild. Also werde ich Ihnen nur zeigen, wie es derzeit aussieht. Also öffne ich das in Safari und verkleinere es einfach, so dass es eher wie ein Telefon aussieht. Sie können sehen, dass ich hier einen Ozeanwellen-Hintergrund habe, also ist das im HTML-CSS. Sie können sehen, ich habe Hintergrund und dann den Namen der Bilddatei. So können Sie diesen Hintergrund durch Ihren eigenen ersetzen. Wenn Sie nur sicherstellen, dass Sie die Datei an der gleichen Stelle platzieren, die ich habe, ist die Datei in. Sie können sogar eine Datei mit dem gleichen Namen, bg.JPEG, einwerfen und die alte ersetzen, und dann müssen Sie den Code überhaupt nicht ändern. Der Code darunter im Grunde sagt nur, dass dieses Bild gestreckt wird, so dass es auf die ganze Seite passt. Als nächstes haben Sie das CSS für die Schaltfläche. Dies hat den Radius der Kanten, so dass es an den Rändern nicht völlig schärfer ist, es ändert den Schriftstil in Großbuchstaben, und was ich gerade hervorgehoben habe, ist das CSS für die Google-Schriften. Wenn ich also zu Google-Schriftarten zurückgehe, sehen Sie, dass sich unter dem ersten Codestück ein weiteres Stück Code befindet. Sie werden das kopieren und dann in die Schaltfläche CSS setzen wollen. Also markieren Sie einfach, was ich hatte, und ersetzen Sie es durch das neue. Sie können damit herumspielen und Dinge wie die Schriftgröße, die Polsterung, all das Zeug ändern . keine Angst, wenn Sie es durcheinander bringen, einfach die neuen Dateien wieder von Skill Share herunter und beginnen Sie von vorne. Eine Sache, die Sie ändern möchten, sind die Knopffarben, Sie werden wollen, dass sie mit Ihrem Branding Mine passen sind derzeit in Opry Pink Motiv. Also, wenn Sie das tun wollen, zeige ich Ihnen, wie Sie das tun, oder Sie können einfach eine Farbe auswählen und diese auf alle Tasten anwenden. Also, wenn Sie mit Opry Outlook gehen wollen, schlage ich vor, mit der Website namens 0to255.com zu gehen. Hier können Sie in einer Hex-Farbe eingeben oder eine zufällige Farbe auswählen und dann werden Sie eine ganze Reihe von diesen Schattierungen erhalten, die mit dieser Farbe zusammenhängen. Also wählen Sie einfach, wo Sie wollen, dass es beginnen oder wo Sie wollen es endet bis zur Dunkelheit und Leichtigkeit und gehen Sie mit dieser Farbe. Sie werden auf meiner Website bemerken, dass die Schaltflächen irgendwie transparent sind, und das liegt daran, dass sie ein Hintergrundbild haben. Also wollte ich, dass es durchkommt. Also werde ich einen RGBA-Farbcode anstelle eines Hex-Codes verwenden , so dass er etwas Transparenz hat. Also füge ich nur den Hex-Code ein, den ich von diesem Opry-Schattengenerator bekam. Dann nehme ich den Schieberegler und verschiebe ihn für den Prozentsatz, den die Deckkraft haben soll. Ich werde es bei 50 Prozent setzen und dann auf die Schaltfläche „hex to RGBA“ klicken, und dann sollte es die Zahlen herausgeben, die wir brauchen. So können Sie die untere Zahl sehen, RGBA für CSS ist, was wir brauchen. Kopieren Sie diesen Code, gehen Sie zurück zu Dream Weaver und fügen Sie ihn dann zwischen dem Doppelpunkt und dem Semikolon ein. Sie möchten dies für alle sieben Schaltflächen tun, je nachdem, welche Farben Sie wollen und wenn Sie möchten, dass es gleich ist, können Sie einfach den gleichen Code für jede Schaltfläche einfügen. Wenn Sie die Hintergrundfarbe in etwas ändern, das nicht mit der Farbe der Schriftart funktioniert, die ich jetzt habe, können Sie das immer ändern. Ich ändere jetzt nur die Schriftgröße, um es dir zu zeigen. Ich habe es bis zu 50 Pixel gesetzt und dann ist die Schriftfarbe unter Farbe. Also probiere ich nur ein paar Dinge aus, es tut nicht weh, es zu versuchen. Sie können immer „Apple Z“ oder „Control Z“, um zurück zu dem, was es war. Also sechs F's sind weiß. Also werde ich das einfach reinlegen und sehen, wie es aussieht. Eine Sache, auf die Sie achten möchten, ist, wenn ich durch das CSS scrolle, sehen Sie ein Bild-Tag. Also IMG, und dann in Klammern haben Sie die Breite und die Ausrichtung, sowie wie viel Platz oben oder unten ist. Daher ist die maximale Breite wichtig, da Ihre Bildgröße möglicherweise anders als meine ist. In Ihrem Download-Beispiel verwende ich das Skill-Share-Logo, also habe ich die maximale Breite auf 400 Pixel gesetzt, da es sich um ein breites Bild handelt, das nicht sehr groß ist. Wenn Sie jedoch ein größeres Bild haben, sollten Sie die maximale Breite auf 200 Pixel setzen. Ich füge auch mehr Abstand zum oberen und unteren Rand des Logos hinzu, indem ich den Rand unten und oben ändere. Dies gibt ihm nur ein wenig Atemraum vor den Knöpfen. 4. Deine Link-Klicks verfolgen.: Der nächste Schritt besteht darin, Links zu setzen, damit diese Schaltflächen funktionieren. Ich schlage vor, ein super einfaches Tool namens Linktrack. Es gibt viele Möglichkeiten, Ihre Links zu verfolgen, einschließlich kostenloser Tools wie Google Analytics. Diese sind ein wenig kompliziert und würden einen eigenen Skillshare Kurs erfordern, also werde ich nur etwas verwenden, das kostenlos und sehr, sehr einfach zu bedienen ist. Sie können Ihre eigenen kostenlosen Beratungs-Track erstellen. Ich werde Ihnen in meinem Konto zeigen, wie Sie einen Link erstellen. Aber zuerst werde ich tatsächlich eine Link-Gruppe erstellen , weil Sie andere Links in der Zukunft verfolgen möchten, so dass die Dinge organisiert bleiben. Ich habe bereits eine Gruppe namens Skillshare erstellt, aber Sie möchten Ihre eigene erstellen. Klicken Sie einfach auf „Gruppe hinzufügen“ und geben Sie den Namen und die Beschreibung ein und klicken Sie auf „Hinzufügen“. Wenn Sie nun auf die Links in der Dropdown-Liste klicken und dann auf „Einen neuen Link erstellen“ klicken, legen Sie hier die Adresse, wohin Sie möchten, dass diese Schaltfläche den Benutzer bringt, und dann den Titel, und dann den Titel,so dass Sie sehen können, wie es heißt. Sie können Notizen hinzufügen, wenn Sie möchten, und dann möchten Sie die Gruppe auswählen, in der Sie es einfügen möchten, und klicken Sie dann einfach auf „Link speichern“. Wenn du nun in die Gruppen auf der linken Seite gehst, siehst du die beiden Gruppen. Ich werde auf die Skillshare Gruppe klicken, und Sie werden sehen, dass ich zwei Links hier habe, die ich gerade gemacht habe. Auf der Seite davon können Sie kleine Symbole sehen. Das Bleistift-Symbol ermöglicht es Ihnen, es zu bearbeiten , und das Info-Symbol, das das kleine i mit einem Kreis ist, ermöglicht es Ihnen, zu sehen, was die Adressen und andere Informationen. Sie können sehen, dass der Tracking-Link direkt dort ist. Sie möchten mit der rechten Maustaste auf diese und Kopie-Link-Adresse klicken. Sie werden diesen Link in Dreamweaver mit Ihrem Link-Tag verwenden. Wir sind zurück in Ihren Texteditor oder Dreamweaver gegangen, je nachdem, welcher auch immer Sie verwenden, und Sie möchten zu dem Tag gehen, das das A-Leerzeichen H Ref hat, und markieren Sie einfach den Link, den ich dort habe, und fügen Sie den soeben kopierten ein. Jetzt sind Ihre Links einsatzbereit. Sie sollten den Text jedoch ändern, so dass er auf der Schaltfläche liest, was auch immer dieser Link ist, zu dem sie gehen sollen. Ein Tipp, der super-hilfreich ist, werde ich Ihnen jetzt zeigen. Ich werde tatsächlich diesen Button Namen von etwas so spezifisch auf vorgestellten Link ändern , weil Sie immer einen Link in Instagram und Ihrem Beitrag haben , der für diesen Tag anders ist, und Sie sagen Link in Bio. Für diesen wird es sein, was auch immer der vorgestellte Link ist. Ich gehe zurück in diesen Link im Link-Tracker, klicke auf die Schaltfläche Bearbeiten, und dann werde ich den Titel in Featured Posts ändern, also dann weiß ich, dass dies derjenige ist, den ich ändern möchte. Wenn ich es ändern möchte, gehe ich einfach in den Link zur Eingabe und lege die Adresse für den neuen Link ein. Auf diese Weise muss ich den Code nicht anfassen. Ich muss nur in Linktrack gehen und den alten Link durch den neuen Link ersetzen , da der Linktrack-Link gleich bleibt und dieser Link immer noch im Code enthalten ist. Es wird nur zu einer anderen Adresse umgeleitet, abhängig von meinem neuesten Instagram-Post. Jetzt werde ich Ihnen schnell zeigen, wie es aussehen wird, wenn Sie ein paar Daten haben. Ich habe diese Links gerade vor ein paar Tagen in meine Instagram-Posts installiert. Wenn ich in Gruppen gehe und in meine Instagram-Links gehe, sind das diejenigen, die gerade auf meiner Website live sind. Sie können die Gesamtzahl ganz rechts sehen, das sind, wie viele Leute angeklickt haben, und ich kann deutlich sehen, welche zwei Links am besten sind. Das sind wirklich tolle Informationen. Wenn Sie auf das kleine Graphen-Symbol klicken, können Sie ein wenig von einer weiteren Aufschlüsselung sehen, wie der Beitrag an einem bestimmten Tag war. Das gibt Ihnen einen Einblick in, ob Sie bestimmte Beiträge gehalten haben, die über ein Produkt gesprochen haben. Sie können sehen, ob es tatsächlich funktioniert hat und ob die Leute darauf klicken. 5. Deine Linkseite leben: Sobald Sie Ihre Änderungen vorgenommen haben, möchten Sie es in Ihrem Browser von Ihrem Desktop aus öffnen und sicherstellen, dass es richtig funktioniert. Dann möchten Sie Ihren FTP-Client öffnen. Ich werde FileZilla öffnen. Wenn Sie jedoch keinen FTP-Client verwenden möchten, können Sie sich möglicherweise bei Ihrem Hosting-Konto anmelden. Ich war in der Lage, dies sowohl in GoDaddy als auch in DreamHost zu tun. Also werde ich mich einfach in meinem DreamHost-Konto anmelden und zu ihrem FTP gehen , das tatsächlich in Ihrem Webbrowser gebaut ist. Also von hier aus können Sie einfach in Ihren Ordner klicken und die Datei hochladen oder gesichert FileZilla, Sie verbinden sich einfach mit Ihrem FTP und Sie werden Ihre Website aufgelistet sehen. Also werde ich in sarahtypes.shop klicken und Sie werden Ihre Dateien dort haben. Alle Ihre lokalen Dateien befinden sich auf der linken Seite. So können Sie durch diese Ordner navigieren, um die richtigen Ordner zu finden, und dann ziehen Sie sie einfach in den Ordner auf der rechten Seite. Ich habe meine schon rüber gezogen. Sie können sehen, ich habe zwei Dateien eine index.html und my-links.html. Wenn Sie die Datei als index.html speichern, wenn Sie zu der Adresse gehen, die www.mysite.com oder in diesem Fall sarahtypes.shop wäre. Das ist die Akte, die es aufgeben wird. Wenn Sie es jedoch als einen anderen Namen angeben, wenn es nicht index.com ist, wenn es sich um meine-links.com oder links.com handelt, wird das nach einem umgekehrten Schrägstrich liegen. Es muss also sarahtypes.shop/meine-links.html sein. Sie werden auch bemerken, wenn Sie sich mein FTP ansehen, dass ich die Datei bg.jpg und die Logo-Datei auf der gleichen Ebene wie die Indexdatei wie unter my-links.html habe. Sie müssen sicherstellen, dass sich diese alle an der gleichen Stelle befinden, damit sie wissen kann, wo diese Dateien abgerufen werden sollen, da der Pfad, den wir im Code haben , diese Dateien aus dem Stammordner erfasst. Sobald das in Ihrem Web-Browser funktioniert, werden Sie sich in Ihrem Instagram-Konto auf Ihrem mobilen Gerät oder iPad anmelden wollen Ihrem mobilen Gerät oder , weil ich denke, das sind die einzigen zwei Orte, die Sie ändern können, und dann gehen Sie , um zu Mein Profil zu gehen und Sie gehen, um auf Profil bearbeiten klicken und dann werden Sie in der Webadresse für diese Link-Website eingeben, meins ist sarahtypes.shop, und dann, wenn Sie darauf klicken, sollten Sie sich auf diese Seite bringen, die die, die wir gerade erstellt haben. Stellen Sie sicher, dass Sie alle Links testen und stellen Sie sicher, dass alles funktioniert bevor Sie es hochladen, so dass Sie keine frustrierten Benutzer haben, und wenn Sie irgendwelche Kommentare haben, lassen Sie es mich wissen und ich werde mein Bestes tun, um Ihnen zu helfen. Ich würde gerne sehen, wie Sie verlinkte Seiten aussehen , also stellen Sie sicher, dass Sie diese im Community-Bereich verlassen, und danke, dass Sie sich diesen Kurs angesehen haben.