How to Create a Linktree Alternative using Webflow

As a business owner, I can’t stand using free tools that throw their watermark on top of my brand. I get it if the features are amazing, but when we’re talking about something as basic as Linktree—a profile pic, a name, some links, and a few buttons—why would I pay for that? And why let someone else’s logo tag along with my brand? I’ve already got a website and it’s easy to create my own branded quick link page.

I don’t actually care much about the $5 a month—I get it, they’re a business solving a problem for a lot of people. But at the same time, the features you get at that price are pretty limited. You’re basically paying to get rid of their watermark, and that’s about it.

On the flip side, building your own custom link hub on your website gives you so much more. Not only do you have full control over the design, but you also keep all your user data in one place. I’m able to track every click, every visit, and every interaction on my website without bouncing between platforms. Plus, you can tweak the look and feel to match your brand perfectly, adding any custom features you want. And honestly, it’s a fun project that pays off every time someone visits your link hub.

Alright, I’m finished ranting, for now... Let’s talk about how to get started.

Step 1: Write a list of links you’ll want to suggest to visitors

First things first, we need a basic outline. Start by listing all the links you want people to be able to navigate to. This is your foundation, so take a moment to think about what’s most important for your audience to see. But let’s take it a step further—I like to think of this process as building a user flow document. Start by considering where your link hub will live and what context your visitors will have when they land on it.

For example, if your link is in your Instagram bio, think about the vibe of your Instagram profile. What kind of content are you posting? How does that relate to the experience you want users to have when they click through to your link hub? The goal here is to create a seamless transition from your social media to your website. If your Instagram is full of bright, bold images, maybe your link hub should reflect that energy. On the other hand, if your social media is more minimalistic, you might want to keep your link hub clean and simple. It’s all about ensuring that the journey feels cohesive, giving users the right impression and guiding them to where you want them to go.

Step 2: Wireframe your linktree alternative (link in bio)

Once you've put together your list of links, it's time to start wireframing your page. I recommend focusing on a mobile-first design since, more likely than not, most people will visit this page on their phones—either by scanning a QR code or clicking a link in your social media bio.

Now, there’s no need to reinvent the wheel, but you can certainly try if that’s your thing. To save you some effort, I’m providing a few layout options for your link in bio (or link hub, quick link page, or whatever you want to call it). If you find one you like, feel free to skip the wireframing step altogether and jump straight into customizing. But if none of these layouts resonate with you, then by all means, grab your sketchpad and start designing some wireframes that better fit your vision. Here’s a link to my Figma template that you can easily tweak to match your brand’s aesthetic, which we’ll go over in just a second.

During the wireframing stage, a lot of people use Lorem Ipsum and placeholder images, but I prefer to use real content right from the start. This approach helps you see exactly what the user experience will be like before moving into the UI design phase. It gives you a clearer picture of how everything flows and whether the content and design work together seamlessly.

Step 3: Time to make it POP

Now that your wireframe is finished, it’s time to dive into the UI design phase. This is where the real fun begins—taking your basic layout and transforming it into something that truly reflects your brand’s visual identity. Start by swapping out all those placeholder colors, fonts, and icons with elements that align with your brand. Think about the mood and message you want to convey. Is your brand bold and energetic? Consider vibrant colors and dynamic fonts. Or maybe you’re going for something more sleek and sophisticated—in which case, a minimal color palette and clean typography might be the way to go.

Don’t just stop at colors and fonts, though. Pay attention to the details like button styles, hover effects, and iconography. These small elements can make a big difference in how cohesive and professional your link hub looks. Remember, consistency is key here—everything should feel like it belongs together and clearly represents your brand.

Finally, as you work through the UI design, keep the user experience in mind. The design should not only look good but also be intuitive and easy to navigate. The goal is to create a visually appealing and functional page that makes it effortless for users to find what they’re looking for. This phase is all about bringing your wireframe to life in a way that feels uniquely yours.

Step 4: Setup your link hub page

Now that we're done with the visual elements, it's time to head over to your web development platform of choice. The first step here is simply setting up the page, laying down the foundation for what will become your custom link hub. In the next step, we’ll dive into actually developing the design you’ve created. For my website, I chose to use Webflow, but you can use whatever platform you’re comfortable with.

First, let’s pick out the URL for your link hub. This might seem like a small detail, but it’s an important one—it’s part of how people will remember and revisit your page. For my site, I went with /quick-links, but you could use anything that fits your brand’s tone and personality. Here are a few suggestions if your link hub is just for you:

• /my-links
• /connect
• /shortcuts
• /link-hub
• /paths

Alternatively, if you’re creating a template page for your employees or team members, you can use a URL naming convention that includes their name or username. This not only keeps things organized but also makes it easy for each person to share their personalized link hub. Here are a few examples:

• /links/username (e.g., /links/janedoe)
• /portal/username (e.g., /portal/alex-jones)
• /connect/username (e.g., /connect/emilyw)

Once you’ve nailed down the URL, it’s time to move on to some essential SEO elements: the meta title, meta description, and OG (Open Graph) image.

For your meta title, keep it short and straightforward. You could use your name and job title, highlight your specialty and the industry you serve, or opt for something else that’s clear and to the point. Just avoid the temptation to cram everything you do into the title, separated by commas—less is more here, and you’ve got the meta description to add more context.

Speaking of the meta description, this is where you can give a brief but meaningful overview of what visitors can expect to find when they click through. I like to keep it contextual and specific, highlighting the key links or resources they’ll encounter on your page. This helps set the right expectations and can improve your click-through rate.

Finally, let’s talk about the OG image. This image will show up when your link hub is shared on social media, so make it count. If you’re a freelancer or a one-person agency, consider using a professional photo of yourself—something that feels authentic and on-brand. Just be sure not to repeat the same text you used in the meta title. Instead, think of it like a YouTube thumbnail, where the image and title work together to grab attention and convey your message in a complementary way.

Step 5: Build Your Link Page in Webflow

If you’re using Webflow, this next part should be pretty straightforward. Webflow's visual development interface allows you to translate your design file into a fully functional webpage without touching much code. Start by recreating the structure and layout you’ve wireframed, focusing on details like spacing, alignment, and typography. Webflow’s drag-and-drop functionality and pre-built components will make this process smooth and intuitive.

If you’re using one of the templates I provided, making your link hub responsive in Webflow is a breeze. The platform automatically adapts your design for different screen sizes, but you’ll want to fine-tune it to ensure everything looks perfect on mobile. Start by adding a container with a max width of 400px and 16px of padding around your content. This simple step will keep your layout neat and readable, especially on smaller screens where most of your traffic will likely come from.

As you build, take advantage of Webflow’s built-in preview tools to check how your page looks on various devices—mobile, tablet, and desktop. This will help you catch any issues early and ensure a seamless, responsive design. Webflow’s flexibility also allows you to manually adjust styles for each device view, so don’t hesitate to make tweaks as needed to get everything just right.

And remember, even though Webflow is user-friendly, it also offers the power to add custom CSS or further refine your design elements. Sometimes a little manual adjustment can make all the difference in bringing your vision to life. Don’t be afraid to experiment with these tools to perfect your quick link page.

If you'd like to see an example of a link page in action, you can click here for my quick links.

Step 6: Publish your new page and update your social media

Alright, we’re on the last leg of this journey—publishing your new page and making sure it gets the attention it deserves. Once your link hub is live, the first step is to update all your social media platforms with the new link. This is where your followers and potential clients will likely connect with you, so make sure the link is front and center. Whether it’s in your Instagram bio, Twitter profile, LinkedIn summary, or anywhere else you have an online presence, replace those old links with your shiny new one.

But don’t stop there—think about how you can make this link even more accessible. Consider adding a QR code to your business card, so when you’re networking in person, people can easily scan it and be taken directly to your link hub. It’s a simple touch that can make a big difference in how easily people can connect with you. And if you’re an iPhone user, why not turn your lock screen into a virtual business card? It’s a creative way to make your contact info instantly accessible, and it’s bound to leave an impression.

If you’re curious about how to set that up, check out my other blog post on How To Make a Virtual Business Card For Your iPhone Lock Screen.

Now, before I let you go, let’s take a moment to appreciate the hard work you’ve put in. You’ve gone from a scattered collection of links to a polished, branded link hub that truly represents you. That’s something to be proud of! Thanks for reading, you're looking great btw. Did you do something new with your hair? IDK, ur just lookin real cute.

‍