How to Build a DIY Linktree Alternative with WordPress

Why Build Your Own Link-in-Bio Page?

If you've spent any time on Instagram, you've seen the ubiquitous "link in bio" call to action. Click it, and you're usually taken to a Linktree page — a simple list of buttons pointing to everything that person does on the internet. It's a clean, effective concept, but it comes with a monthly fee.

Here's the thing: if you already have a WordPress website, you can build this exact page yourself and host it on your own domain. You keep full control, avoid recurring costs, and can customize it far beyond what Linktree's templates allow. The trade-off is time and a bit of technical know-how, but by the end of this walkthrough, you'll have a ready-to-use link-in-bio page that looks just as polished as the ones used by major influencers.

Studying the Linktree Designs of Gary Vee, Selena Gomez, and Alicia Keys

Before building anything, it pays to study what works. Linktree showcases celebrity profiles on their homepage, and three stand out as useful design references.

Gary Vee's page uses a solid dark background, a circular profile photo, his name in clean typography, and a stack of rectangular buttons with small images on the left side. At the bottom sits a row of social media icons. His page also features a clever inline newsletter opt-in form that expands when clicked — a nice touch we'll try to replicate.

Selena Gomez takes a more artistic approach with a full-bleed background photo in a monochromatic red palette. The buttons have rounded corners and sit on a semi-transparent background. The visual cohesion is striking and works because the limited color palette keeps the focus on the content rather than the imagery.

Alicia Keys keeps things minimal: a gradient background blending two colors, a profile image, and simple transparent buttons with white outlines. On hover, the buttons fill with white and the text changes color. No images in the buttons at all. This is the easiest design to replicate and a great starting point for anyone using the free version of Elementor.

Setting Up WordPress and Elementor for a Bio Link Page

You'll need two things to get started: a WordPress installation and the free Elementor plugin. If you don't already have a WordPress site, you can grab a cheap domain — the `.link` top-level domain is perfect for this and costs around five bucks a year on Namecheap. For hosting, Cloudways is a solid starting point for anyone beginning their WordPress journey.

Once WordPress is running, install and activate the free Elementor plugin from the plugin repository. Create a new page, click "Edit with Elementor," and immediately change the page layout from Default to **Elementor Canvas**. This strips away the theme's header and footer, giving you a blank slate — exactly what a link-in-bio page needs.

One important tip: the default WordPress theme can cause styling conflicts with Elementor. If you notice your designs not rendering correctly on the front end, switch to the **Hello Elementor** theme. It's an ultra-minimal blank theme purpose-built for Elementor projects, and it eliminates virtually all style conflicts.

Creating the Background and Page Layout

With your blank canvas ready, add a single-column section and start styling. For a gradient background like Alicia Keys' page, use a Chrome extension like ColorZilla to sample colors directly from the inspiration page. In Elementor, set the background type to Gradient, paste in your two color codes, and you've got a nearly identical look in seconds.

If you prefer a photo background like Selena Gomez's page, upload your image and add a **background overlay** with a dark, semi-transparent color. This dims the image enough for text and buttons to remain readable. Pay attention to color palette — monochromatic or limited-color backgrounds work far better than busy, multi-colored photos because they don't compete with your content for attention.

For dimensions, use your browser's inspector tool to measure Linktree's layout. The content area is approximately 680 pixels wide. In Elementor, set the section width to 680px, the height to "Fit to Screen" (or minimum height at 100vh), and position the column at the top. This gives you a centered, full-height layout that mirrors Linktree's proportions on desktop while remaining responsive on mobile.

Adding Your Profile Photo and Name

Every link-in-bio page starts with a circular profile photo and a name or handle. Drag an Image widget into your section and upload a photo — ideally pre-sized to around 96 pixels square, which matches Linktree's dimensions. Set the image to the thumbnail size in WordPress, then under Style, set the max width to 96px.

To make it circular, set the border radius to 45px on all corners. The square image instantly becomes a clean circle, just like Linktree does with their profile photos.

For your name, use a Heading widget. Center the alignment, change the text color to white (or black, depending on your background), and use the WhatFont Chrome extension to match Linktree's typography. They use Google's Karla font at 16 pixels — and since it's a Google font, it's available directly in Elementor's typography settings. Add about 36 pixels of top padding to the section to give your profile photo some breathing room from the top of the page.

Building Alicia Keys-Style Buttons (Free Elementor)

The simplest button style to replicate is Alicia Keys' transparent buttons with white outlines. Drag a Button widget into your layout and set the alignment to **Justify** so it spans the full width. Under Style, make the background color fully transparent using the opacity slider.

Add a solid border with a 1-pixel width in white. Set the border radius to zero for squared-off corners that match Gary Vee's aesthetic, or keep a slight radius for a softer look. For the hover state, set the background color to white and the text color to something that contrasts — sampling an accent color from your background image with ColorZilla works well.

To match Linktree's button height of 56 pixels, add about 20 pixels of top and bottom padding. Once you've perfected the style on one button, simply right-click and duplicate it (or use Command+D / Ctrl+D) to create as many buttons as you need. Just update the text and link for each one.

You can add icons from Elementor's built-in icon library, but honestly, the small icons crammed into the button corner don't look great. If you want images in your buttons, you'll need Elementor Pro.

Creating Gary Vee-Style Image Buttons with Elementor Pro

For buttons that include thumbnail images on the left — like Gary Vee's podcast buttons or Selena Gomez's rounded links — you'll need Elementor Pro's **Call to Action** widget. This is a Pro-only feature starting at $49 per year.

Drop the Call to Action widget into your layout and upload a small image (around 54 pixels square works well). Remove the title and button text since you'll use the description field as your button label. Under Style, set the content padding to match your image height, make the background transparent, and change the description text to white with a font weight of 600.

The key settings: under Advanced, add a 1-pixel solid white border. Under hover effects, set the background to white and the description hover color to your accent color. Make sure to set the overlay hover color to fully transparent — otherwise you'll get an unwanted gray tint on hover. Finally, under Content, set the link to apply to the "whole box" rather than just a button element, so the entire widget becomes clickable.

For Selena Gomez's rounded style, just increase the border radius to about 10-15 pixels and add a solid white background instead of transparent.

Adding Social Media Icons

Every Linktree page ends with a row of social media icons, and Elementor makes this dead simple with its **Social Icons** widget. Search for it in the widget panel — and be careful not to confuse it with Social Sharing buttons, which are for sharing the current page rather than linking to your profiles.

By default, you get Facebook, Twitter, and YouTube icons. Click the pencil icon on any one to change the service, and use the icon library to find platforms like TikTok, Instagram, LinkedIn, or anything else. You can even upload custom SVG icons if your platform isn't listed.

To match Linktree's minimal style, go to Style and set the primary color to fully transparent. This strips away the colored backgrounds and leaves just clean white logo icons. You can also change the shape to rounded, squared, or circular depending on your preference. Don't forget to add the actual profile URLs for each icon — it's easy to overlook this step when you're focused on styling.

Newsletter Opt-In: Inline Form and Popup Options

One of the cleverest features on Gary Vee's Linktree is the newsletter button that expands into an inline opt-in form. Replicating this exact interaction in Elementor isn't straightforward, but you have two solid alternatives.

The first approach is an **inline form** placed directly on the page. Using Elementor Pro's Form widget, set the email field to about 70% width and the submit button to 30% so they sit side by side. Remove column gaps, make the field background transparent with a white border, and style the button to match your other elements. Getting the heights to align takes some fiddling with line-height and padding values, but the result looks clean and professional.

The second — and often better — approach is a **popup form**. In Elementor Pro, go to Templates > Popups and create a new popup with an opt-in form. Style it to match your page, then go back to your link-in-bio page and set one of your buttons to trigger the popup using Elementor's dynamic tags. When visitors click the button, a polished opt-in form slides into view. Just make sure to connect your email service provider (MailChimp, ActiveCampaign, Drip, etc.) under the form's Actions After Submit settings.

Linktree vs. DIY: Which Features Are Worth the $6/Month?

Building your own link-in-bio page gives you unlimited customization, but Linktree does pack in some features that are genuinely hard to replicate on your own.

The easy wins for WordPress include unlimited links, video embeds (YouTube, TikTok, Facebook), social icons, priority link animations via Elementor's motion effects, and commerce links through PayPal, Stripe, or WooCommerce. If you already have blog content on your WordPress site, you can even pull in your latest posts with Elementor Pro's Posts widget — something Linktree handles with RSS feeds.

Where Linktree genuinely earns its keep is in **link scheduling** (going live and expiring at specific times — doable in WordPress with a plugin like If-So, but clunky), **QR codes** for printed materials, and especially **analytics**. Getting per-button click-through rates and unique visitor data from a custom WordPress page requires setting up Google Analytics event tracking, which is a project unto itself. Linktree gives you this out of the box.

The bottom line: if you're already running a WordPress site with Elementor Pro, building your own link-in-bio page is a rewarding weekend project that saves you the ongoing subscription. But if analytics matter to you or you need scheduling features, Linktree's $6/month is honestly a bargain for the time it saves.

Watch the Full Video

Prefer watching to reading? Check out the full video on YouTube for a complete walkthrough with live demos and commentary.