Crea tu propio linktree casero con HTML, CSS y JavaScript
El linktree se ha convertido en una herramienta muy popular entre creadores de contenido, influencers y marcas para reunir todos sus enlaces en un solo lugar.
Plataformas como Linktr.ee ofrecen una solución fácil pero limitada y de pago. ¿Sabías que puedes crear tu propio linktree personalizado de forma gratuita? En este tutorial te enseño cómo hacerlo paso a paso con HTML, CSS y JavaScript.
¿Qué es un linktree?
Un linktree es básicamente una página web con una lista de enlaces a tus perfiles y contenidos en otras plataformas como Instagram, YouTube, TikTok, tu sitio web, etc.
Es una bio o perfil enlazado que permite a tus seguidores acceder fácilmente a todo tu contenido desde un solo lugar.
Ventajas de hacer tu propio linktree
- Es 100% personalizable: puedes diseñarlo como quieras para que refleje tu marca.
- No tiene limitaciones de enlaces como en las plataformas de pago.
- Puedes añadir mucho más que sólo enlaces: imágenes, videos, texto, etc.
- Te permite tener métricas de tus enlaces con herramientas de analytics.
- No depende de una plataforma externa.
Paso 1 — Crea la estructura HTML
Comienza con la estructura básica de tu página, definiendo el DOCTYPE, el lenguaje, los metadatos, y el título. Asegúrate de vincular tu hoja de estilos CSS y las fuentes e iconos que utilizarás.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ENLABE - Enrique Lazo Bello</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="profile">
<header>
<picture class="profile__container">
<source srcset="images/enlabe.webp" type="image/webp">
<img class="profile__image" width="200" src="images/enlabe.jpg" alt="Enrique Lazo Bello">
</picture>
<h1 class="title">Enrique Lazo Bello</h1>
<h2 class="subtitle"> Full Stack & Creative Developer</h2>
<nav>
<ul class="profile__container profile__container--links">
<li>
<a class="profile__links icon" href="https://www.instagram.com/enlabe/">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a class="profile__links icon" href="https://www.tiktok.com/@enlabe">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a class="profile__links icon" href="https://medium.com/@enlabe">
<i class="fa-brands fa-medium"></i>
</a>
</li>
<li>
<a class="profile__links icon" href="https://www.youtube.com/enlabe">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
</ul>
</nav>
</header>
<section>
<h3 class="hightext">¿Cómo hacer tu propio linktree casero?</h3>
<nav>
<ul class="profile__container">
<li>
<a class="profile__links" href="#">
Crea la base de tu linktree casero con HTML y CSS
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
¡Publica tu linktree casero y compártelo con el mundo!
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
Haz tu linktree más dinámico añadiendo Vue.js
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
Convierte tu linktree en un sistema administrable
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
Despliega tu linktree casero con Firebase
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
Analiza el rendimiento con métricas en Google Analytics
</a>
</li>
<li>
<a class="profile__links disabled" href="#">
Entiende a tus seguidores interpretando tus métricas
</a>
</li>
</ul>
</nav>
</section>
</div>
<script src="main.js"></script>
</body>
</html>Estructura HTML
<div class="profile">- Define undivque engloba todo el contenido del linktree. Le damos la clase.profilecomo nuestro bloque principal.<header>- El header contiene la imagen, título y subtítulo.<picture>y<img>- Para la imagen utilizas etiquetas HTML5 como<picture>para cargar diferentes formatos, y dentro va la etiqueta<img>con el src real.<h1>y<h2>- Los encabezados para el título y subtítulo respectivamente.<nav>- Contiene la navegación con los enlaces a tus redes sociales.<ul>y<li>- La lista desordenada con cada elemento de enlace.<section>- Divide la sección con los enlaces del linktree.<h3>- Un encabezado pequeño para el título de esta sección.<nav>y<ul>- De nuevo la navegación con lista de enlaces.
Paso 2 — Diseño con CSS
Ahora podemos agregar estilos CSS para que se vea mucho mejor:
:root{
--color-dark:#18203a;
--color-primary: #fff;
--color-disable: #aaa;
--color-alternative: #35ecf4;
--color-secondary: #667380;
--color-blue: #0B4CA1;
}
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background: var(--color-dark);
color: var(--color-primary);
padding-bottom: 50px;
text-align: center;
}
.profile__container{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
list-style: none;
flex-flow: column;
padding:0;
position:relative;
}
.profile__container.active{
max-height: 953px;
}
.profile__image {
width: 50%;
object-fit: cover;
border-radius: 50%;
}
.profile__container.profile__container--links{
flex-flow: row wrap;
}
.profile__links.icon{
margin: 0 24px;
font-size: 28px;
color: var(--color-alternative);
text-decoration: none;
background: none;
}
.profile__links{
background:var(--color-secondary);
padding:20px;
display: inline-block;
border-radius: 30px;
color: var(--color-primary);
text-decoration: none;
margin-bottom: 20px;
}
.profile__links.disabled{
background:var(--color-disable);
cursor: not-allowed;
}
.title{
font-size: 2rem;
}
.subtitle{
font-size: 1.5rem;
font-weight: 400;
}
.hightext{
font-size: 1.5rem;
color: var(--color-alternative);
}
.btn{
background:var(--color-primary);
color: var(--color-blue);
padding:20px 30px;
text-align: center;
display: inline-block;
border:0 none;
font-size: 1rem;
margin-top: 20px;
}Con esto centramos el contenido, establecemos una tipografía, redondeamos la imagen, quitamos los puntos de la lista y damos estilos a los enlaces.
Metodología BEM
BEM (Block Element Modifier) es una metodología de nomenclatura para clases en HTML y CSS. Está diseñada para hacer el código más legible y fácil de entender, facilitando así el mantenimiento y la escalabilidad de los estilos CSS. Se compone de tres partes principales:
- Bloque: El componente de nivel más alto que funciona como el contenedor principal. En el ejemplo,
.profilees un bloque que encapsula todo el perfil del usuario. - Elemento: Partes del bloque que cumplen una función específica. Se denotan con dos guiones bajos después del nombre del bloque. Por ejemplo,
.profile__linkses un elemento que representa los enlaces dentro del bloque.profile. - Modificador: Se utiliza para definir diferentes estados o versiones de un bloque o elemento. Se denotan con dos guiones después del nombre del bloque o elemento. Un ejemplo sería
.profile__links--disabledpara indicar un enlace que está desactivado.
La metodología BEM ayuda a evitar conflictos de nombres de clases y facilita la comprensión de la relación entre HTML y CSS, haciendo que el código sea más modular y reutilizable.
Paso 3 — Interactividad con JavaScript
Finalmente, utiliza JavaScript para añadir interactividad a tu linktree. Por ejemplo, puedes hacer que los enlaces “deshabilitados” no sean clicables, mejorando la experiencia del usuario:
const buttons = document.querySelectorAll('.disabled');
buttons.forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
});
});Ahora que dominas el arte de crear tu propio linktree casero, es hora de dar el siguiente paso y llevar tu creación al mundo. Pero, ¿cómo puedes asegurarte de que tu linktree no solo sea visto, sino también utilizado por tu audiencia? No basta con construir algo grandioso; el desafío real es hacer que llegue a las personas adecuadas.
En nuestro próximo post, ‘¡Publica tu linktree casero y compártelo con el mundo!’, te guiaré a través del proceso de publicación y promoción de tu linktree.
