Cómo crear una página de aterrizaje personalizada y rastreable en Instagram (enlace en la biografía)

1. Cómo crear una introducción de página de enlaces de Instagram: En este curso, te voy a enseñar a crear una de esas páginas de enlace que encuentres en la biografía de un Instagramer. Estoy usando el sitio de via caligrafía como ejemplo. Ya puedes ver que Linktree tiene este tipo de servicio. Desafortunadamente, obtienes su logo y no eres capaz de cambiar mucho en la página. Entonces te voy a mostrar cómo puedes hacer el tuyo propio, y se verá similar a lo que tengo en mi perfil. Sólo voy a sacar el perfil de Instagram de Sarah Types y dar clic en el enlace y mi biografía. También es bueno porque tienes el enlace de marca. Entonces el mío dice sarahtypes.tienda. Cuando se carga, tengo mi logo ahí arriba. También tengo mis enlaces y tengo rastreadores de enlaces en todos los botones. Esto me dará alguna idea de qué enlaces están desempeñando mejor. No necesitas ser un experto en codificación, fondo básico es útil, pero no es necesario. Te voy a mostrar cada paso del camino sobre cómo puedes crear esto tú mismo y subirlo a tu perfil de Instagram. 2. Qué necesitarás para crear una página de enlaces de Instagram: De acuerdo, entonces primero lo primero, necesitarás un dominio. Se puede acudir a muchas empresas de dominios diferentes. Estoy usando DreamHost en este momento, así que estoy en dreamhost.com. Puedes utilizar su barra de búsqueda en la página principal para encontrar un dominio que funcione con tu perfil. Si se toma, hay otras opciones que sugieren con diferentes terminaciones en lugar de dot com. En realidad agarré sarahtypes.shop solo para poner en mi bio en Instagram, así que es más corto que el enlace completo. También necesitarás hosting. Como pueden ver, estoy pasando por su hosting y son unos $10 al mes. Hay toneladas de diferentes formas en las que puedes obtener hosting desde diferentes sitios. Si no sabes cómo configurar hosting o un dominio, te sugiero que revises mi otra habilidad compartir video sobre cómo crear un sitio web de bodas. En las etapas iniciales de ese curso, te mostré cómo configurar realmente el hosting y dominio para tu cuenta en GoDaddy. Lo siguiente que necesitarás es algún cliente FTP. Yo uso FileZilla, es gratis y es bastante fácil de usar. Entonces si solo vas a FileZilla dash project dot org, puedes descargar su software gratuito y luego puedes conectarlo a tu FTP agarrando tu nombre de usuario y contraseña del hosting que acabas de comprar. En ocasiones también hay gestores de archivos en tu cuenta de hosting. Entonces si esto es demasiado abrumador, también puedes simplemente iniciar sesión en tu hosting y luego encontrar al administrador de archivos, y siempre podrías subir el archivo que vas a hacer en este curso a ese sitio de ahí. También necesitarás una cuenta gratuita de linktrack.info. Esto te permitirá realizar un seguimiento de todos los enlaces que pondrás para tus botones en tu página de destino, y esto te dará algunas analíticas y perspicacia sobre cómo están funcionando todos los botones y cuáles lo están haciendo mejor, y en caso de que ya no tengas una, también necesitarás cuenta de Instagram para que puedas meter este enlace en la biografía y tener una página de aterrizaje con solo tus enlaces más importantes. Lo último que necesitarás es algún editor de texto para que puedas ver el archivo que te voy a dar para descargar y editar el HTML para que puedas crear tus propios enlaces. Un ejemplo gratuito que probablemente ya tengas es TextEdit en tu Apple. Si abres eso y vas a Preferencias y estás en la pestaña Nuevo Documento, solo revisaría Envolver texto y luego quieres ir a la pestaña Abrir y Guardar y asegurarte de que tienes los archivos Mostrar HTML comprobados. De esta forma obtienes el código y no como se vería en un navegador web, y no te preocupes, sé que esto se ve abrumador, pero voy a pasarlo contigo línea por línea, paso a paso para que entiendas lo que todo significa y se obtiene un sitio de trabajo. 3. Configuración de tu archivo y diseño de HTML: Entonces como dije, puedes abrir esto en edición de texto. Pero como tengo Dream weaver, voy a usar Dream weaver si tienes una licencia de Creative Cloud, también puedes descargar Dream weaver usando esa licencia. Simplemente va a ser un poco más fácil para mí mostrarte el código porque tiene diferentes colores para diferentes clases etcétera. En lugar de editar texto, que es solo blanco y negro. ¿ Quieres asegurarte de que no toques las cosas que estoy destacando en este momento, esto es necesario. Esta línea reduce más o menos tu Navegador para que sea visible en el móvil, y no solo se aleje a una página grande. Pero puedes cambiar las cosas que tengo aquí entre las etiquetas de título. Aquí es donde quieres poner el título de tu página. Para que puedas cambiar eso por tu propio nombre. Debajo de ella, tengo un enlace para las fuentes de Google. Si no te gusta la fuente que tengo con este ejemplo, es fácil crear lo que quieras. Si vas a googlefonts.com, usualmente solo las fuentes de Google para llegar a la página web, pero es fonts.google.com. Se puede buscar a través de sus fuentes. Tienen muchos ejemplos diferentes. Simplemente voy a filtrar rápidamente a una fuente Sans Serif y voy a elegir simplemente Roboto condensado. Si solo haces clic en la flecha más, agregará a tu biblioteca, lo que te permitirá usarla en tu código. Entonces, una vez que hagas clic en eso, verás el pequeño pop arriba en la parte inferior. Si solo abres eso, encontrarás el código de incrustación así como los pesos de fuente. Por lo que haces clic en “Personalizar” puedes seleccionar cualquier peso de fuente que quieras usar, y verás que cambia tu tiempo de carga. Por lo que agregar más fuentes creará una carga más pesada en el sitio. Entonces solo me voy a quitar la luz y el regular y luego voy a copiar el código de incrustación. El primero, y éste es el que va a sustituir el código que acabo de mostrarte en la página Dream weaver. Entonces solo voy a dar click debajo de él para mostrarte que es lo mismo. Yo lo voy a pegar ahí dentro, y ya puedes ver ahora tengo dos fuentes diferentes ahí, así que sólo voy a deshacerme de una. Entonces eso es todo lo que tengo que hacer para cambiar la fuente, excepto que tendrás que agregarla en el CSS y te voy a mostrar eso también. Entonces esta cosa que estoy desplazando por ahora es tu código CSS. Normalmente esto está en un archivo separado, pero debido a que este es un sitio tan pequeño, solo lo estoy guardando todo en una sola página para ti. Entonces el primer trozo es tu imagen de fondo. Por lo que sólo voy a mostrarles cómo se ve actualmente. Entonces estoy abriendo esto en Safari y simplemente redimensionándolo para que se vea más como un teléfono. Se puede ver que aquí tengo un fondo de onda oceánica, así que eso está en el CSS HTML. Se puede ver tengo fondo y luego el nombre del archivo de imagen. Por lo que puedes reemplazar este fondo por el tuyo propio. Si tan solo te aseguras de que coloques el archivo en el mismo lugar que tengo, el archivo en. Incluso puedes arrojar un archivo con el mismo nombre, bg.JPEG y reemplazar el anterior y luego no tienes que cambiar el código en absoluto. El código debajo de ella básicamente, solo dice que estirar esta imagen para que se ajuste a toda la página. A continuación tienes el CSS para el botón. Esto tiene el radio de los bordes, lo que no es totalmente más nítido en los bordes, cambia el estilo de fuente a mayúscula, y lo que resalté justo ahí es el CSS para las fuentes de Google. Entonces si vuelvo a las fuentes de Google, verás que hay otra pieza de código debajo de la primera pieza de código. Vas a querer copiar eso y luego poner eso en el botón CSS. Entonces solo resalta lo que tenía, y reemplázalo por el nuevo. Puedes jugar con esto y cambiar cosas como el tamaño de la fuente, el relleno, todas esas cosas. No te asustes si lo arruinas, solo tienes que descargar de nuevo los nuevos archivos de Skill Share y empezar de nuevo. Algo que querrás cambiar son los colores de los botones, querrás que encajen con tu mina de branding están actualmente en opry motivo rosa. Entonces si quieres hacer eso, te mostraré cómo hacerlo, o solo puedes escoger un color y aplicarlo a todos los botones. Entonces si quieres ir con opry outlook, sugiero ir con sitio llamado 0to255.com. Aquí puedes entrar en un color hexadecimal o escoger un color aleatorio y luego vas a conseguir todo un montón de esos tonos que están relacionados con ese color. Así que solo elige donde quieres que empiece o donde quieras que termine hasta la oscuridad y la ligereza e ir con ese color. Notarás en mi sitio que los botones son de alguna manera transparentes, y eso se debe a que tienen una imagen de fondo. Por lo que quería que se mostrara a través. Entonces voy a usar un código de color RGBA en lugar de un código hexadecimal para que tenga algo de transparencia. Entonces solo estoy pegando el código hexadecimal que obtuve de ese generador de sombra opry. Entonces estoy tomando el deslizador y moviéndolo por qué porcentaje quiero que sea la opacidad. Voy a ponerlo al 50 por ciento y luego hacer clic en el botón “hex to RGBA”, y luego debería sacar los números que necesitamos. Para que puedas ver el número inferior, RGBA para CSS es lo que necesitamos. Entonces copia ese código, vuelve a Dream weaver y luego pegarlo entre el colon, y el punto y coma. Tendrás que hacer esto para todos los siete botones, dependiendo de qué colores quieras y si quieres que sea el mismo, solo puedes poner el mismo código para cada botón. Si por casualidad cambias el color de fondo a algo que no funciona con el color de la fuente que tengo ahí ahora, siempre puedes cambiar eso. Solo estoy cambiando el tamaño de la fuente ahora para mostrarte. Lo he puesto hasta 50 píxeles y luego el color de la fuente está bajo color. Entonces solo estoy probando algunas cosas, no hace daño intentarlo. Siempre se puede “Apple Z” o “Control Z” para volver a lo que era. Por lo que seis F es blanca. Entonces sólo voy a poner eso y ver cómo se ve. Algo a lo que querrás prestar atención es cuando me desplace hacia abajo por el CSS, verás una etiqueta de imagen. Entonces IMG, y luego entre paréntesis tienes el ancho y la alineación, así como cuánto espacio hay en la parte superior o inferior. Por lo que el ancho máximo es importante porque el tamaño de tu imagen podría ser diferente al mío. En tu ejemplo de descarga, estoy usando el logotipo de Skill Share, así que pongo el ancho máximo en 400 píxeles porque es una imagen amplia que no es muy alta. Pero si tienes una imagen más alta, es posible que quieras poner el ancho máximo en 200 píxeles. También estoy agregando más espaciado a la parte superior e inferior del logotipo cambiando el margen inferior y superior. Esto sólo le da un poco de espacio para respirar antes de los botones. 4. Seguimiento de tus Clicks de enlaces: El siguiente paso es en realidad poner enlaces para que esos botones funcionen. Te sugiero una herramienta súper fácil llamada Linktrack. Hay muchas formas de realizar un seguimiento de tus enlaces, incluyendo herramientas gratuitas como Google Analytics. Esas son un poco complicadas y requerirían un curso completo de Skillshare por su cuenta, así que solo voy a usar algo que sea gratuito y muy, muy fácil de usar. Podrás crear tu propia pista de consejería gratuita. Te voy a mostrar en mi cuenta cómo crear un enlace. Pero primero, en realidad voy a crear un grupo de enlaces porque es posible que quieras rastrear otros enlaces en el futuro, por lo que esto mantiene las cosas organizadas. Ya he creado un grupo llamado Skillshare, pero quieres crear el tuyo propio. Basta con hacer clic en “Agregar grupo” y poner el nombre y la descripción en, y hacer clic en “Agregar”. Ahora, si haces clic en los enlaces del desplegable y luego haces clic en “Hacer un nuevo enlace”, aquí es donde pones la dirección de donde quieres que ese botón lleve al usuario, y luego el título, esto es para que puedas ver cómo se llama. Puedes agregar notas si quieres, y luego quieres seleccionar el grupo en el que lo vas a poner, y luego solo tienes que hacer clic en “Guardar enlace”. Ahora, si vas a los grupos del lado izquierdo, verás los dos grupos. Voy a dar click en el grupo Skillshare, y ya verás tengo dos enlaces aquí siendo el que acabo de hacer. Por un lado, se pueden ver pequeños iconos. El ícono de lápiz permite editarlo, y el icono de info, que es el pequeño i con un círculo, te permitirá ver cuáles son las direcciones y cualquier otra información. Se puede ver el enlace de seguimiento está justo ahí. Vas a querer hacer clic derecho en eso y copiar dirección de enlace. Vas a utilizar este enlace en Dreamweaver con tu etiqueta de enlace. Hemos vuelto a aparecer en tu editor de texto o Dreamweaver, cualquiera que estés usando, y vas a querer ir a la etiqueta que tiene la ref A space H, y solo resalta el enlace que tengo ahí dentro y pega en el que acabas de copiar. Ahora tus enlaces están listos para salir. Tendrás que tomar cambiar el texto aunque para que se lea en el botón sea cual sea ese enlace al que quieras que vayan. Un consejo que es súper útil te voy a mostrar ahora mismo. En realidad voy a cambiar ese nombre de botón de algo tan específico a link destacado porque siempre tienes un link en Instagram y tu post que es diferente para ese día, y dices link in bio. Para éste, va a ser cualquiera que sea el enlace destacado. Voy a volver a ese enlace en link tracker, haga clic en el botón editar, y luego voy a cambiar el título a posts destacados, así que entonces sé que éste es el que quiero cambiar. Cuando quiera cambiarlo, sólo voy a entrar en el enlace para ingresar y poner en la dirección para el nuevo enlace. De esa manera, no tengo que tocar el código. Simplemente tengo que entrar a Linktrack y reemplazó el antiguo enlace el nuevo enlace porque el enlace Linktrack seguirá siendo el mismo, y ese enlace seguirá estando en el código. Simplemente va a redirigir a una dirección diferente dependiendo de mi publicación más reciente de Instagram. Ahora, te voy a mostrar rápidamente cómo se verá una vez que tengas algunos datos. Acabo de instalar estos enlaces en mis publicaciones de Instagram hace apenas unos días. Si entro en grupos y entro en mis enlaces de Instagram, estos son los que en realidad están en vivo en mi sitio ahora mismo. Se puede ver el número total en el extremo derecho, esas son cuántas personas han hecho clic, y puedo ver claramente qué dos enlaces están haciendo mejor. Esta es realmente una gran información. Si haces clic en el icono de los pequeños gráficos, puedes ver un poco de un desglose más por cómo era la publicación en un día específico. Eso te da alguna visión de si llevabas a cabo unos posts específicos que hablaban de un producto. puede ver si realmente funcionó y si la gente está haciendo clic en él. 5. Hacer tu página de enlace: Una vez que tengas tus cambios realizados, vas a querer abrirlo en tu navegador desde tu escritorio y solo asegúrate de que funcione correctamente. Entonces vas a querer abrir tu cliente FTP. Voy a abrir FileZilla. Pero si no quieres usar el cliente FTP, posiblemente puedas iniciar sesión en tu cuenta de hosting. He podido hacer esto en GoDaddy así como DreamHost. Por lo que solo voy a iniciar sesión en mi cuenta de DreamHost e ir a su FTP que en realidad está construido en tu navegador web. Entonces desde aquí solo puedes hacer clic en tu carpeta y subir el archivo o fileZilla respaldada, solo te conectas a tu FTP y verás listados de tu sitio web. Por lo que voy a dar click en sarahtypes.shop y ahí tendrás tus archivos. Todos tus archivos locales están ubicados en el lado izquierdo. Para que puedas navegar por esas carpetas para encontrar las correctas y luego simplemente arrastras eso a la carpeta de la derecha. Ya arrastré la mía por encima. Ya puedes ver tengo dos archivos un index.html y my-links.html. Si guardas el archivo como index.html, cuando vayas a la dirección, que sería www.mysite.com o en este caso, sarahtypes.shop. Ese es el expediente que va a servir. No obstante, si lo pones como cualquier otro nombre, si no es index.com, si es my-links.com o links.com, eso va a ser después de una contraportada. Por lo que tendrá que ser sarahtypes.shop/my-links.html. También notarás si miras mi FTP, que tengo el archivo bg.jpg y el archivo de logotipo en el mismo nivel que el archivo índice que bajo el archivo my-links.html. Necesitas asegurarte de que todos estos estén en el mismo lugar para que sepa dónde agarrar esos archivos porque la ruta que tenemos en el código agarra esos archivos de la carpeta raíz. Entonces una vez que eso esté funcionando en tu navegador web, vas a querer iniciar sesión en tu cuenta de Instagram en tu dispositivo móvil o iPad porque creo que esos son los únicos dos lugares en los que puedes cambiar esto, y luego te vas para ir a Mi Perfil y vas a dar click en Editar Perfil y luego vas a entrar en la dirección web para este sitio de enlace, mía es sarahtypes.shop, y luego una vez que hagas click en eso, debes traerte a esta página, que es el que acabamos de crear. Asegúrate de probar todos los enlaces y asegúrate de que todo esté funcionando antes de subirlo para que no tengas usuarios frustrados, y si tienes algún comentario, por favor avísame y haré todo lo posible para ayudarte. Me encantaría ver ejemplos de cómo se ven las páginas enlazadas así que asegúrate de dejar las del área de la comunidad, y gracias por ver este curso.