Como criar uma landing page com link no Instagram (link na Bio) rastreável e personalizada

1. Como criar uma página de link do Instagram: Neste curso, vou ensinar-lhe como criar uma dessas páginas de link que você encontra na biografia de um Instagramer. Estou usando o site via caligrafia como um exemplo. Você pode ver que Linktree tem esse tipo de serviço. Infelizmente, você obtém seu logotipo e você não é capaz de mudar muito na página. Então eu vou mostrar a vocês como você pode fazer o seu próprio, e será semelhante ao que eu tenho no meu perfil. Vou apenas trazer o perfil do Instagram da Sarah Types e clicar no link e na minha biografia. Também é bom porque você tem o link de marca. Então o meu diz sarahtypes.shop. Quando carrega, tenho o meu logótipo lá em cima. Eu também tenho meus links e eu tenho rastreadores de link em todos os botões. Isso me dará alguma visão sobre quais links estão melhor desempenho. Você não precisa ser um especialista em codificação, fundo básico é útil, mas não é necessário. Vou mostrar-lhe cada passo do caminho sobre como você pode criar isso sozinho e enviá-lo para o seu perfil do Instagram. 2. O que você vai precisar para criar uma página de link do Instagram: Certo, primeiro as coisas, você precisará de um domínio. Você pode ir para muitas empresas de domínio diferentes. Estou usando o DreamHost no momento, então estou no dreamhost.com. Você pode usar a barra de pesquisa na página principal para encontrar um domínio que funcione com seu perfil. Se for tomado, existem outras opções que eles sugerem com finais diferentes em vez de ponto com. Eu realmente agarrei sarahtypes.shop apenas para colocar na minha biografia no Instagram, por isso é mais curto do que o link completo. Você também precisará de hospedagem. Como você pode ver, eu estou passando por sua hospedagem e custa cerca de US $10 por mês. Há toneladas de maneiras diferentes que você pode obter hospedagem de diferentes sites. Se você não sabe como configurar hospedagem ou um domínio, sugiro que você confira meu outro vídeo de compartilhamento de habilidades sobre como criar um site de casamento. Nos estágios iniciais desse curso, eu mostrei a você como realmente configurar a hospedagem e o domínio para sua conta no GoDaddy. A próxima coisa que você vai precisar é de algum cliente FTP. Eu uso FileZilla, é gratuito e é muito fácil de usar. Então, se você apenas ir para FileZilla dash project dot org, você pode baixar seu software livre e, em seguida, você pode conectá-lo ao seu FTP, pegando seu nome de usuário e senha da hospedagem que você acabou de comprar. Às vezes, também há gerenciadores de arquivos em sua conta de hospedagem. Então, se isso é muito esmagador, você também pode apenas fazer login em sua hospedagem e, em seguida, encontrar o gerenciador de arquivos, e você pode sempre carregar o arquivo que você vai fazer neste curso para aquele site lá. Você também precisará de uma conta gratuita do linktrack.info. Isso permitirá que você acompanhe todos os links que você colocará para seus botões em sua página de destino, e isso lhe dará algumas análises e insights sobre como todos os botões estão funcionando e quais estão indo melhor, e no caso de você ainda não ter um, você também precisará da conta do Instagram para que você possa inserir este link na biografia e ter uma página de destino com apenas seus links mais importantes. A última coisa que você vai precisar é de um editor de texto para que você possa ver o arquivo que eu vou lhe dar para baixar e editar o HTML para que você possa criar seus próprios links. Um exemplo gratuito que você provavelmente já tem é TextEdit em sua Apple. Se você abrir isso e ir para Preferências e você estiver na guia Novo documento, eu iria apenas marcar a opção Quebrar texto e, em seguida, você deseja ir para a guia Abrir e Salvar e certificar-se de que você tem os arquivos Exibir HTML marcada. Desta forma, você obtém o código e não o que ele seria parecido em um navegador da web, e não se preocupe, eu sei que isso parece esmagador, mas eu vou passar por isso com você linha por linha, passo a passo para que você entenda o que tudo significa e você começa um local de trabalho. 3. Como configurar seu arquivo e design em HTML: Então, como eu disse, você pode abrir isso na edição de texto. Mas como eu tenho Dream Weaver, vou usar Dream Weaver se você tiver uma licença da Creative Cloud, você também pode baixar Dream Weaver usando essa licença. Só vai ser um pouco mais fácil para mim mostrar o código porque ele tem cores diferentes para diferentes classes etc. Em vez de edição de texto, que é apenas preto e branco. Você quer ter certeza de que você não toque nas coisas que eu estou destacando agora, isso é necessário. Esta linha praticamente dimensiona seu navegador para baixo de modo que é visível no celular, e não apenas zoom para uma página grande. Mas você pode mudar o que eu tenho aqui entre as etiquetas de título. Este é o lugar onde você deseja colocar o título da sua página. Então você pode mudar isso para o seu próprio nome. Por baixo, tenho um link para fontes do Google. Se você não gosta da fonte que eu tenho com este exemplo, é fácil criar o que você quiser. Se você vai para googlefonts.com, eu geralmente apenas fontes do Google para chegar à página da web, mas é fonts.google.com. Você pode pesquisar através de suas fontes. Eles têm muitos exemplos diferentes. Eu só vou filtrar rapidamente através uma fonte Sans Serif e eu vou apenas escolher Roboto condensado. Se você clicar na seta de adição, ela irá adicioná-la à sua biblioteca, o que permitirá que você a use em seu código. Assim que você clicar nisso, você verá o pequeno pop-up na parte inferior. Se você simplesmente abrir isso, você encontrará o código de incorporação, bem como os pesos da fonte. Então você clica em “Personalizar” você pode selecionar o peso da fonte que você deseja usar, e você verá que ele muda seu tempo de carregamento. Então, adicionar mais fontes criará uma carga mais pesada no site. Então eu só vou tirar a luz e o normal e então eu vou copiar o código de incorporação. A primeira, e esta é a que vai substituir o código que acabei de mostrar na página do Weaver dos Sonhos. Então eu vou apenas clicar abaixo dele para mostrar que é a mesma coisa. Eu vou colá-lo lá, e você pode ver agora eu tenho duas fontes diferentes lá, então eu vou apenas me livrar de uma. Então isso é tudo que eu tenho que fazer para mudar a fonte, exceto que você vai ter que adicioná-lo no CSS e eu vou mostrar-lhe isso também. Então este material que eu estou rolando agora é o seu código CSS. Normalmente isso está em um arquivo separado, mas como este é um site tão pequeno, eu estou apenas mantendo tudo em uma página para você. Então a primeira parte é a sua imagem de fundo. Então, eu só vou mostrar a vocês o que parece atualmente. Então estou abrindo isso no Safari e redimensionando para que pareça mais um telefone. Você pode ver que eu tenho um fundo de ondas oceânicas aqui, então isso está no CSS HTML. Você pode ver que eu tenho fundo e, em seguida, o nome do arquivo de imagem. Então você pode substituir esse fundo pelo seu próprio. Se você apenas se certificar de que você colocar o arquivo no mesmo lugar que eu tenho, o arquivo em. Você pode até jogar em um arquivo com o mesmo nome, bg.JPEG e substituir o antigo e, em seguida, você não precisa alterar o código em tudo. O código embaixo dele basicamente, só diz que esticar esta imagem para que ela se encaixe na página inteira. Em seguida, você tem o CSS para o botão. Isso tem o raio das bordas, então não é totalmente mais nítido nas bordas, ele muda o estilo da fonte para maiúsculas, e o que eu realcei apenas lá é o CSS para as fontes do Google. Então, se eu voltar para fontes do Google, você verá que há outro pedaço de código embaixo do primeiro pedaço de código. Você vai querer copiar isso e, em seguida, colocar isso no botão CSS. Então, basta destacar o que eu tinha, e substituí-lo com o novo. Você pode brincar com isso e mudar coisas como o tamanho da fonte, o preenchimento, todas essas coisas. Não tenha medo se você estragar tudo, basta baixar os novos arquivos novamente do Skill Share e começar tudo de novo. Uma coisa que você vai querer mudar são as cores dos botões, você vai querer que eles se encaixem com sua mina de marca estão atualmente em motivo rosa opry. Então, se você quiser fazer isso, eu vou te mostrar como fazer isso, ou você pode simplesmente escolher uma cor e aplicar isso a todos os botões. Então, se você quiser ir com o outlook opry, eu sugiro ir com o site chamado 0to255.com. Aqui você pode entrar em uma cor hexadecimal ou escolher uma cor aleatória e, em seguida, você vai obter um monte de tons que estão relacionados a essa cor. Então, basta escolher onde você quer que ele comece ou onde você quer que ele termine até a escuridão e leveza e ir com essa cor. Você notará no meu site que os botões são de alguma forma transparentes, e isso é porque eles têm uma imagem de fundo. Então eu queria que ele aparecesse. Então eu vou usar um código de cor RGBA em vez de um código hexadecimal para que ele tenha alguma transparência. Então eu estou apenas colando o código hexadecimal que eu peguei daquele gerador de sombra opry. Então eu vou pegar o controle deslizante e movê-lo para a porcentagem que eu quero que a opacidade seja. Vou colocá-lo em 50% e depois clicar no botão “hexadecimal para RGBA”, e então ele deve colocar os números que precisamos. Então você pode ver o número inferior, RGBA para CSS é o que precisamos. Copie esse código, volte para Dream Weaver e cole-o entre os dois pontos e o ponto e vírgula. Você vai querer fazer isso para todos os sete botões, dependendo das cores que você quer e se você quiser que ele seja o mesmo, você pode simplesmente colocar no mesmo código para cada botão. Se você mudar a cor de fundo para algo que não funciona com a cor da fonte que eu tenho lá agora, você sempre pode mudar isso. Só estou mudando o tamanho da fonte agora para mostrar a vocês. Eu coloquei até 50 pixels e, em seguida, a cor da fonte está sob cor. Então eu só estou experimentando algumas coisas, não faz mal tentar. Você sempre pode “Apple Z” ou “Control Z” para voltar ao que era. Então seis “F “é branco. Então eu vou colocar isso e ver como é. Uma coisa que você vai querer prestar atenção é quando eu rolar para baixo através do CSS, você verá uma tag de imagem. Então IMG e, em seguida, entre parênteses, você tem a largura e o alinhamento, bem como quanto espaço está na parte superior ou inferior. Portanto, a largura máxima é importante porque o tamanho da imagem pode ser diferente do meu. No seu exemplo de download, estou usando o logotipo do Compartilhamento de habilidades, então coloquei a largura máxima em 400 pixels porque é uma imagem ampla que não é muito alta. Mas se você tiver uma imagem mais alta, talvez queira colocar a largura máxima em 200 pixels. Também estou adicionando mais espaçamento para a parte superior e inferior do logotipo alterando a margem inferior e superior. Isto dá-lhe um pouco de espaço para respirar antes dos botões. 4. Como seguir seus de link: O próximo passo é, na verdade, colocar links para que esses botões funcionem. Sugiro uma ferramenta super fácil chamada Linktrack. Há muitas maneiras de rastrear seus links, incluindo ferramentas gratuitas, como o Google Analytics. Esses são um pouco complicados e exigiriam um curso completo de Skillshare por conta própria, então eu só vou usar algo que é gratuito e muito, muito fácil de usar. Você pode criar sua própria pista de aconselhamento gratuito. Vou mostrar-lhe na minha conta como criar um link. Mas primeiro, eu realmente vou criar um grupo de links porque você pode querer rastrear outros links no futuro, então isso mantém as coisas organizadas. Eu já criei um grupo chamado Skillshare, mas você quer criar o seu próprio. Basta clicar em “Adicionar grupo” e colocar o nome e a descrição em, e clicar em “Adicionar”. Agora, se você clicar nos links no menu suspenso e, em seguida, clicar em “Criar um novo link”, é aqui que você coloca o endereço de onde você quer que o botão leve o usuário, e depois o título, isso é para e depois o título, que você possa ver como ele é chamado. Você pode adicionar notas se quiser e, em seguida, você deseja selecionar o grupo em que você vai colocá-lo e, em seguida, basta clicar em “Salvar link”. Agora, se você entrar nos grupos do lado esquerdo, você verá os dois grupos. Eu vou clicar no grupo Skillshare, e você verá que eu tenho dois links aqui sendo o que eu acabei de criar. Do lado, você pode ver pequenos ícones. O ícone de lápis permite que você o edite, e o ícone de informação, que é o pequeno i com um círculo, permitirá que você veja o que os endereços e qualquer outra informação. Você pode ver que o link de rastreamento está bem ali. Você vai querer clicar com o botão direito do mouse nisso e copiar o endereço do link. Você usará esse link no Dreamweaver com sua tag de link. Voltamos ao editor de texto ou ao Dreamweaver , o que estiver usando, e você vai querer ir para a tag que tem a referência de espaço A H, e apenas destacar o link que eu tenho e colar o que você acabou de copiar. Agora seus links estão prontos para ir. Você vai querer tomar alterar o texto embora para que ele lê no botão seja qual for o link que você deseja que eles acessem. Uma dica que é muito útil, vou mostrar-lhe agora mesmo. Eu estou realmente indo para mudar esse nome botão de algo tão específico para o link em destaque porque você sempre tem um link no Instagram e seu post que é diferente para aquele dia, e você diz link em bio. Para este, vai ser qualquer que seja o link em destaque. Eu vou voltar para esse link no rastreador de links, clique no botão de edição, e então eu vou mudar o título para posts em destaque, então eu sei que este é o que eu quero mudar. Quando eu quiser alterá-lo, eu vou apenas ir para o link para entrada e colocar no endereço para o novo link. Assim, não preciso tocar no código. Eu só tenho que ir para Linktrack e substituído o link antigo pelo novo link porque o link Linktrack permanecerá o mesmo, e esse link ainda estará no código. Ele só vai redirecionar para um endereço diferente dependendo do meu post mais recente no Instagram. Agora, eu vou mostrar rapidamente como vai parecer uma vez que você tem alguns dados. Acabei de instalar esses links em meus posts do Instagram apenas alguns dias atrás. Se eu entrar em grupos e entrar em meus links do Instagram, esses são os que estão realmente ao vivo no meu site agora. Você pode ver o número total na extrema direita, essas são quantas pessoas clicaram, e eu posso ver claramente quais dois links estão fazendo melhor. Esta é realmente uma ótima informação. Se você clicar no ícone de pequenos gráficos, você pode ver um pouco de mais detalhamento de como a postagem foi em um dia específico. Isso lhe dá alguma visão sobre se você manteve um post específico que falou sobre um produto. Você pode ver se realmente funcionou e se as pessoas estão clicando nele. 5. Como fazer sua página de link: Uma vez que você tenha suas alterações feitas, você vai querer abri-lo no seu navegador a partir da sua área de trabalho e apenas certifique-se de que ele funciona corretamente. Em seguida, você vai querer abrir o seu cliente FTP. Vou abrir o FileZilla. Mas se você não quiser usar o cliente FTP, você pode possivelmente fazer login em sua conta de hospedagem. Eu tenho sido capaz de fazer isso em GoDaddy, bem como DreamHost. Então eu vou apenas fazer login na minha conta DreamHost e ir para o FTP deles que é realmente construído em seu navegador web. Então, a partir daqui você pode simplesmente clicar em sua pasta e carregar o arquivo ou apoiado FileZilla, você apenas se conectar ao seu FTP e você verá o seu site está listado. Então eu vou clicar em sarahtypes.shop e você terá seus arquivos lá. Todos os seus arquivos locais estão localizados no lado esquerdo. Então você pode navegar através dessas pastas para encontrar as corretas e, em seguida basta arrastar isso para a pasta à direita. Eu já arrastei o meu. Você pode ver que eu tenho dois arquivos um index.html e my-links.html. Se você salvar o arquivo como index.html, quando você vai para o endereço, que seria www.mysite.com ou, neste caso, sarahtypes.shop. Esse é o arquivo que vai servir. No entanto, se você colocá-lo como qualquer outro nome, se não for index.com, se for my-links.com ou links.com, isso será depois de uma barra invertida. Por isso, terá que ser sarahtypes.shop/my-links.html. Você também notará se você olhar para o meu FTP, que eu tenho o arquivo bg.jpg e o arquivo de logotipo no mesmo nível que o arquivo de índice como no arquivo my-links.html. Você precisa ter certeza de que eles estão todos no mesmo local para que ele saiba onde pegar esses arquivos porque o caminho que temos no código agarra esses arquivos da pasta raiz. Então, uma vez que isso está funcionando em seu navegador, você vai querer fazer login em sua conta do Instagram em seu dispositivo móvel ou iPad porque eu acho que esses são os únicos dois lugares que você pode mudar isso, e então você está indo para ir para Meu Perfil e você vai clicar em Editar Perfil e, em seguida, você vai inserir no endereço web para este site de link, o meu é sarahtypes.shop, e então uma vez que você clicar sobre isso, você deve trazer-se para esta página, que é o que acabamos de criar. Certifique-se de testar todos os links e certifique-se de que tudo está funcionando antes de enviá-lo para que você não tenha nenhum usuário frustrado, e se você tiver quaisquer comentários, por favor me avise e eu farei o meu melhor para ajudá-lo. Eu adoraria ver exemplos de como você está páginas vinculadas , então certifique-se de deixar essas páginas na área da comunidade, e obrigado por assistir a este curso.