Comment créer une page d'atterrissage personnalisable et traçable pour les liens Instagram (Lien dans la bio)

1. Comment créer une page Instagram Link Intro: Dans ce cours, je vais vous apprendre à créer une de ces pages de liens que vous trouverez dans la bio d'un Instagramer. J' utilise le site via calligraphie comme exemple. Vous pouvez voir que Linktree a ce type de service. Malheureusement, vous obtenez leur logo et vous n'êtes pas en mesure de changer beaucoup dans la page. Donc, je vais vous montrer comment vous pouvez faire le vôtre, et cela ressemblera à ce que j'ai sur mon profil. Je vais juste faire apparaître le profil Instagram de Sarah Typs et cliquer sur le lien et ma biographie. C' est aussi bon parce que vous avez le lien de marque. Donc le mien dit sarahtypes.shop. Quand il se charge, j'ai mon logo là-haut. J' ai aussi mes liens et j'ai des trackers de liens sur tous les boutons. Cela me donnera un aperçu des liens qui fonctionnent mieux. Vous n'avez pas besoin d'être un expert en codage, arrière-plan de base est utile, mais pas nécessaire. Je vais vous montrer à chaque étape sur la façon dont vous pouvez créer cela vous-même et le télécharger sur votre profil Instagram. 2. Ce que vous aurez besoin pour créer une page de lien Instagram: D' abord, vous aurez besoin d'un domaine. Vous pouvez aller à de nombreuses entreprises de domaine différentes. J' utilise DreamHost en ce moment, donc je suis sur dreamhost.com. Vous pouvez utiliser leur barre de recherche sur la page principale pour trouver un domaine qui fonctionne avec votre profil. Si c'est pris, il y a d'autres options qu'ils suggèrent avec des terminaisons différentes au lieu de dot com. J' ai en fait attrapé sarahtypes.shop juste pour mettre dans ma bio sur Instagram, donc c'est plus court que le lien complet. Vous aurez également besoin d'hébergement. Comme vous pouvez le voir, je passe par leur hébergement et c'est environ 10$ par mois. Il existe des tonnes de différentes façons d'obtenir l'hébergement à partir de différents sites. Si vous ne savez pas comment configurer l'hébergement ou un domaine, je vous suggère de consulter mon autre vidéo de partage de compétences sur la façon de créer un site de mariage. Au début de ce cours, je vous ai montré comment configurer réellement l'hébergement et le domaine pour votre compte sur GoDaddy. La prochaine chose dont vous aurez besoin est un client FTP. J' utilise FileZilla, c'est gratuit et c'est assez facile à utiliser. Donc, si vous allez simplement à FileZilla dash project dot org, vous pouvez télécharger leur logiciel gratuit et ensuite vous pouvez le connecter à votre FTP en saisissant votre nom d'utilisateur et mot de passe de l'hébergement que vous venez d'acheter. Parfois, il y a aussi des gestionnaires de fichiers sur votre compte d'hébergement. Donc, si c'est trop écrasant, vous pouvez également simplement vous connecter à votre hébergement et ensuite trouver le gestionnaire de fichiers, et vous pouvez toujours télécharger le fichier que vous allez faire dans ce cours sur ce site là-bas. Vous aurez également besoin d'un compte gratuit de linktrack.info. Cela vous permettra de suivre tous les liens que vous allez mettre pour vos boutons sur votre page de destination, et cela vous donnera quelques analyses et un aperçu de la façon dont tous les boutons fonctionnent et ceux qui font le mieux, et au cas où vous n'en auriez pas déjà un, vous aurez également besoin d'un compte Instagram afin que vous puissiez coller ce lien dans la bio et avoir une page de destination avec juste vos liens les plus importants. La dernière chose dont vous aurez besoin est un éditeur de texte afin que vous puissiez voir le fichier que je vais vous donner pour télécharger et modifier le HTML afin que vous puissiez créer vos propres liens. Un exemple gratuit que vous avez probablement déjà est TextEdit sur votre Apple. Si vous ouvrez cela et allez dans Préférences et que vous êtes sur l'onglet Nouveau document, je cocherais simplement le texte enveloppé, puis vous voulez aller dans l' onglet Ouvrir et enregistrer et assurez-vous que les fichiers HTML d'affichage sont cochés. De cette façon, vous obtenez le code et pas à quoi il ressemblerait sur un navigateur Web, et ne vous inquiétez pas , je sais que cela semble écrasant, mais je vais le parcourir avec vous ligne par ligne, étape par étape afin que vous compreniez ce que tout signifie et vous obtenez un site de travail. 3. Configurer votre fichier HTML et votre conception HTML: Donc, comme je l'ai dit, vous pouvez l'ouvrir en édition de texte. Mais puisque j'ai Dream weaver, je vais utiliser Dream weaver si vous avez une licence Creative Cloud, vous pouvez également télécharger Dream weaver en utilisant cette licence. Ce sera juste un peu plus facile pour moi de vous montrer le code car il a des couleurs différentes pour différentes classes, etcetera. Au lieu de l'édition de texte, qui est juste noir et blanc. Vous voulez vous assurer que vous ne touchez pas à ce que je souligne en ce moment, c'est nécessaire. Cette ligne à peu près à l'échelle de votre navigateur vers le bas de sorte qu'il est visible sur mobile, et il ne suffit pas de zoomer sur une grande page. Mais vous pouvez changer les choses que j'ai ici entre les balises de titre. C' est là que vous voulez mettre le titre de votre page. Donc tu peux changer ça à ton propre nom. En dessous, j'ai un lien pour les polices Google. Si vous n'aimez pas la police que j'ai avec cet exemple, il est facile de créer ce que vous voulez. Si vous allez sur googlefonts.com, j'ai généralement juste des polices Google pour accéder à la page Web, mais c'est fonts.google.com. Vous pouvez rechercher dans leurs polices. Ils ont beaucoup d'exemples différents. Je vais juste filtrer rapidement jusqu'à une police Sans Serif et je vais juste choisir Roboto condensé. Si vous cliquez simplement sur la flèche plus, elle l'ajoutera à votre bibliothèque, ce qui vous permettra de l'utiliser dans votre code. Donc, une fois que vous cliquez dessus, vous verrez le petit pop-up en bas. Si vous ouvrez simplement cela, vous trouverez le code incorporé ainsi que les poids des polices. Donc, vous cliquez sur « Personnaliser », vous pouvez sélectionner le poids de police que vous voulez utiliser, et vous verrez que cela change votre temps de chargement. Donc, ajouter plus de polices créera une charge plus lourde sur le site. Donc, je vais juste enlever la lumière et le régulier et ensuite je vais copier le code incorporé. Le premier, et c'est celui qui va remplacer le code que je viens de vous montrer sur la page Dream tisserand. Donc je vais juste cliquer dessus pour vous montrer que c'est la même chose. Je vais le coller là-dedans, et vous pouvez voir maintenant que j'ai deux polices différentes là-bas, donc je vais juste me débarrasser d'une. Donc, c'est tout ce que j'ai à faire pour changer la police, sauf que vous devrez l'ajouter dans le CSS et je vous montrerai cela aussi. Donc, ce truc que je fais défiler maintenant est votre code CSS. Normalement, c'est dans un fichier séparé, mais parce que c'est un site si petit, je garde juste tout sur une page pour vous. Donc, le premier morceau est votre image d'arrière-plan. Donc je vais juste te montrer à quoi ça ressemble actuellement. Donc, j'ouvre cela dans Safari et juste le redimensionnement vers le bas pour qu'il ressemble plus à un téléphone. Vous pouvez voir que j'ai un fond d'onde océanique ici, donc c'est dans le CSS HTML. Vous pouvez voir que j'ai l'arrière-plan, puis le nom du fichier image. Ainsi, vous pouvez remplacer cet arrière-plan par le vôtre. Si vous vous assurez juste que vous placez le fichier au même endroit que moi, le fichier dans. Vous pouvez même jeter un fichier avec le même nom, bg.JPEG et remplacer l'ancien, puis vous n'avez pas besoin de changer le code du tout. Le code en dessous, dit simplement que étirer cette image afin qu'elle s'adapte à toute la page. Ensuite, vous avez le CSS pour le bouton. Cela a le rayon des bords, donc ce n'est pas totalement plus net sur les bords, il change le style de police en majuscules, et ce que j'ai mis en évidence juste là est le CSS pour les polices Google. Donc, si je retourne aux polices Google, vous verrez qu'il y a un autre morceau de code sous le premier morceau de code. Vous allez vouloir copier cela, puis mettre cela dans le bouton CSS. Il suffit de mettre en évidence ce que j'avais, et de le remplacer par le nouveau. Vous pouvez jouer avec ça et changer des choses comme la taille de la police, le rembourrage, tout ça. N' ayez pas peur si vous le gâchez, téléchargez à nouveau les nouveaux fichiers à partir de Skill Share et recommencez. Une chose que vous voudrez changer sont les couleurs des boutons, vous voudrez qu'ils s'adaptent à votre mine de marque sont actuellement en motif rose opry. Donc, si vous voulez faire ça, je vais vous montrer comment faire, ou vous pouvez juste choisir une couleur et l'appliquer à tous les boutons. Donc, si vous voulez aller avec opry outlook, je suggère d'aller avec le site appelé 0to255.com. Ici, vous pouvez entrer dans une couleur hexadécimale ou choisir une couleur aléatoire et ensuite vous allez obtenir tout un tas de ces nuances qui sont liées à cette couleur. Alors il suffit de choisir où vous voulez qu'il commence ou où vous voulez qu'il se termine aussi loin que l'obscurité et la légèreté et aller avec cette couleur. Vous remarquerez sur mon site que les boutons sont en quelque sorte transparents, et c'est parce qu'ils ont une image d'arrière-plan. Donc je voulais que ça se passe. Donc, je vais utiliser un code couleur RGBA au lieu d'un code hexadécimal afin qu'il ait une certaine transparence. Donc je colle juste dans le code hexadécimal que j'ai obtenu de ce générateur d'ombre Opry. Ensuite, je prends le curseur et je le déplace pour quel pourcentage je veux que l'opacité soit. Je vais le mettre à 50 pour cent, puis cliquez sur le bouton « hexadécimal à RGBA », puis il devrait mettre les chiffres dont nous avons besoin. Donc, vous pouvez voir le numéro inférieur, RGBA pour CSS est ce dont nous avons besoin. Copiez ce code, retournez à Dream Weaver et collez-le entre le deux-points et le point-virgule. Vous voudrez le faire pour tous les sept boutons, selon les couleurs que vous voulez et si vous voulez que ce soit le même, vous pouvez simplement mettre le même code pour chaque bouton. Si vous changez la couleur d'arrière-plan en quelque chose qui ne fonctionne pas avec la couleur de la police que j'ai là maintenant, vous pouvez toujours changer cela. Je change juste la taille de la police maintenant pour vous montrer. Je l'ai mis jusqu'à 50 pixels, puis la couleur de la police est sous couleur. Donc j'essaie juste des choses, ça ne fait pas mal d'essayer. Vous pouvez toujours « Apple Z » ou « Control Z » pour revenir à ce qu'il était. Donc six F est blanc. Donc je vais juste mettre ça et voir à quoi ça ressemble. Une chose à laquelle vous voudrez faire attention est que lorsque je fais défiler le CSS, vous verrez une balise d'image. Donc IMG, puis entre parenthèses, vous avez la largeur et l'alignement, ainsi que combien d'espace est sur le haut ou le bas. La largeur maximale est donc importante car la taille de votre image peut être différente de la mienne. Dans votre exemple de téléchargement, j'utilise le logo Skill Share, donc j'ai mis la largeur maximale à 400 pixels car c'est une image large qui n'est pas très grande. Mais si vous avez une image plus grande, vous pouvez mettre la largeur maximale à 200 pixels. J' ajoute également plus d'espacement en haut et en bas du logo en changeant la marge en bas et en haut. Cela lui donne juste un peu de place pour respirer avant les boutons. 4. Suivi de votre clics de lien: L' étape suivante consiste en fait à mettre des liens pour que ces boutons fonctionnent. Je suggère un outil super facile appelé Linktrack. Il existe de nombreuses façons de suivre vos liens, y compris des outils gratuits comme Google Analytics. Ceux-ci sont un peu compliqués et nécessiteraient un cours Skillshare complet de leur propre, donc je vais juste utiliser quelque chose qui est gratuit et très, très facile à utiliser. Vous pouvez créer votre propre piste de conseil gratuite. Je vais vous montrer dans mon compte comment créer un lien. Mais d'abord, je vais créer un groupe de liens parce que vous voudrez peut-être suivre d'autres liens à l'avenir, donc cela garde les choses organisées. J' ai déjà créé un groupe appelé Skillshare, mais vous voulez créer le vôtre. Il vous suffit de cliquer sur « Ajouter un groupe » et de mettre le nom et la description dans, et de cliquer sur « Ajouter ». Maintenant, si vous cliquez sur les liens dans la liste déroulante, puis cliquez sur « Créer un nouveau lien », c'est là que vous mettez l'adresse de l'endroit où vous voulez que ce bouton emmène l'utilisateur, puis le titre,c'est pour puis le titre, que vous puissiez voir ce qu'il s'appelle. Vous pouvez ajouter des notes si vous le souhaitez, puis vous voulez sélectionner le groupe dans lequel vous allez le mettre, puis cliquez simplement sur « Enregistrer le lien ». Maintenant, si vous allez dans les groupes à gauche, vous verrez les deux groupes. Je vais cliquer sur le groupe Skillshare, et vous verrez que j'ai deux liens ici étant celui que je viens de créer. Sur le côté de celui-ci, vous pouvez voir de petites icônes. L' icône crayon vous permet de l'éditer, et l'icône info, qui est le petit i avec un cercle, vous permettra de voir ce que les adresses et toute autre information. Vous pouvez voir que le lien de suivi est juste là. Vous allez vouloir cliquer avec le bouton droit sur cette adresse et copier le lien. Vous allez utiliser ce lien dans Dreamweaver avec votre balise de lien. Nous sommes retournés dans votre éditeur de texte ou Dreamweaver, quel que soit celui que vous utilisez, et vous allez vouloir aller à la balise qui a l'espace A ref H, et juste mettre en surbrillance le lien que j'ai là et coller dans celui que vous venez de copier. Maintenant, vos liens sont prêts à partir. Vous voudrez cependant modifier le texte afin qu'il lit sur le bouton quel que soit ce lien que vous voulez qu'ils aillent. Un conseil qui est super utile, je vais vous montrer tout de suite. Je vais en fait changer ce nom de bouton de quelque chose de si spécifique au lien en vedette parce que vous avez toujours un lien dans Instagram et votre post qui est différent pour ce jour-là, et vous dites lien dans la bio. Pour celui-ci, ce sera quel que soit le lien en vedette. Je vais revenir sur ce lien dans le tracker de liens, cliquez sur le bouton Modifier, puis je vais changer le titre en messages en vedette, alors je sais que c'est celui que je veux changer. Quand je veux le changer, je vais juste aller dans le lien pour entrer et mettre l'adresse pour le nouveau lien. Comme ça, je n'ai pas à toucher au code. Je dois juste aller dans Linktrack et remplacer l'ancien lien par le nouveau lien parce que le lien Linktrack restera le même, et ce lien sera toujours dans le code. Il va juste rediriger vers une adresse différente en fonction de mon dernier post Instagram. Maintenant, je vais vous montrer rapidement à quoi ça ressemblera une fois que vous aurez quelques données. Je viens d'installer ces liens dans mes messages Instagram il y a quelques jours. Si je vais dans des groupes et aller dans mes liens Instagram, sont ceux qui sont réellement en direct sur mon site en ce moment. Vous pouvez voir le nombre total à l'extrême droite, sont le nombre de personnes qui ont cliqué, et je peux clairement voir quels deux liens font le mieux. C' est vraiment une excellente information. Si vous cliquez sur l'icône des petits graphiques, vous pouvez voir un peu plus loin sur la façon dont la publication était un jour spécifique. Cela vous donne un aperçu de si vous avez occupé un poste spécifique qui parlait d'un produit. Vous pouvez voir si cela a réellement fonctionné et si les gens cliquent dessus. 5. Donner votre page de lien en direct: Une fois que vous avez effectué vos modifications, vous allez vouloir l'ouvrir dans votre navigateur à partir de votre bureau et assurez-vous simplement qu'il fonctionne correctement. Ensuite, vous allez vouloir ouvrir votre client FTP. Je vais ouvrir FileZilla. Mais si vous ne voulez pas utiliser le client FTP, vous pouvez éventuellement vous connecter à votre compte d'hébergement. J' ai pu le faire dans GoDaddy ainsi que DreamHost. Donc, je vais juste me connecter à mon compte DreamHost et aller à leur FTP qui est réellement construit dans votre navigateur Web. Donc, à partir d'ici, vous pouvez simplement cliquer dans votre dossier et télécharger le fichier ou sauvegardé FileZilla, vous venez de vous connecter à votre FTP et vous verrez votre site Web est répertorié. Donc je vais cliquer sur sarahtypes.shop et vous aurez vos fichiers là-bas. Tous vos fichiers locaux se trouvent sur le côté gauche. Ainsi, vous pouvez naviguer dans ces dossiers pour trouver les bons, puis vous faites simplement glisser cela dans le dossier sur la droite. J' ai déjà traîné le mien. Vous pouvez voir que j'ai deux fichiers un index.html et my-links.html. Si vous enregistrez le fichier sous index.html, lorsque vous allez à l'adresse, qui serait www.mysite.com ou dans ce cas, sarahtypes.shop. C' est le dossier qu'il va servir. Cependant, si vous le mettez comme un autre nom, si ce n'est pas index.com, si c'est my-links.com ou links.com, ce sera après une barre oblique inverse. Donc, il devra être sarahtypes.shop/my-links.html. Vous remarquerez également si vous regardez mon FTP, que j'ai le fichier bg.jpg et le fichier logo au même niveau que le fichier d'index que sous le fichier my-links.html. Vous devez vous assurer que ceux-ci sont tous au même endroit afin qu'il sache où récupérer ces fichiers car le chemin que nous avons dans le code saisit ces fichiers du dossier racine. Donc, une fois que cela fonctionne sur votre navigateur Web, vous allez vouloir vous connecter à votre compte Instagram sur votre appareil mobile ou iPad parce que je pense que ce sont les deux seuls endroits où vous pouvez changer cela, et puis vous allez pour aller à Mon profil et vous allez cliquer sur Modifier le profil et puis vous allez entrer dans l'adresse web de ce site de lien, mien est sarahtypes.shop, et puis une fois que vous cliquez sur cela, vous devriez vous amener à cette page, qui est celui que nous venons de créer. Assurez-vous de tester tous les liens et assurez-vous que tout fonctionne avant de le télécharger afin que vous n'ayez pas d'utilisateurs frustrés, et si vous avez des commentaires, s'il vous plaît laissez-moi savoir et je ferai de mon mieux pour vous aider. J' aimerais voir des exemples de ce à quoi ressemblent les pages liées , alors assurez-vous de les laisser dans la zone communautaire, et merci d'avoir regardé ce cours.