LinkTree is a free website (or paid) that shows all your links in a smartphone friendly way and is perfect for your social media. Creating a LinkTree page is especially useful for Instagram, because you have few options for posting links here. largest downside to using Linktree is the potential for lost website traffic to your own site.
But did you know that you can create your own LinkTree and increase your website traffic? (Believe me you want that!) Because the largest downside to using Linktree is the potential for lost website traffic to your own site.
The good news is that you can easily create your own LinkTree on your website, without having to know HTML or CSS. In this article I will tell you with which codes you can create a LinkTree page on your own website and boost your website traffic in no time! If you’re Dutch, I wrote this article also in Dutch. Check it here.
What does a good Link page need?
A good LinkTree page needs a few things:
A simple URL
Smartphone friendly link and text
Biography, image and text
A simplified theme
Sounds easy right?
Follow the eight steps to create your LinkTree page.
To get started, log in to your website. In this article I will show you how I add it in my WordPress page, if you use another platform you will have to use the same kind of links. You can also always use the same codes!
Step 1: Add a new page
In WordPress, click Pages > Add new.
Step 2: Change your page slug
Your slug is not the same as your page name. It’s what follows after www.website.com/your-slug-here. You want to keep this short and simple in this case. I recommend using something like “Links” or “Instagram” so you can easily recognize and remember it.
In WordPress you can edit your URL in the permalink section or using the Yoast SEO plugin. In Squarespace you do this under the ‘Basics’ tab.
Step 3: Add a title and image
Next you want to add a title on your page. This does not have to be the same as your slug, but is the official name of your LinkTree. This could be something as simple as “Hi Instagram!”
You can place a bio image below, but you don’t have to. You can also choose to put it at the bottom of your links, or leave it out completely. That choice is yours. I think a round image always looks nice and it also keeps you in the social media style. You can format it in Canva or use a linking tool like this.
Step 4: Add custom CSS
Your LinkTree needs your own links of course! This involves some coding work. Of course you can add links in your usual link style, but then you don’t have that LinkTree style that looks so good on smartphones.
Save a draft of your page and go to your ‘Appearance’ tab in WordPress. You can also open it in a new tab. We’ll need to add some custom CSS, so don’t open your Theme Editor, open the customization shortcut instead. You can find this at Appearance > Customize > Custom CSS. Find it here in Squarespace.
Now comes the fun part! You will add custom CSS, which will make it look neat and in a nice style. We add some created block links because they are easy to edit and look good on your mobile. It is also what LinkTree uses and what you can make yourself.
Paste the following code into your CSS box:
.instagram {
list-style-type: none;
text-align: center;
display: block;
font-size: 17px;
padding: 5px;
}
.instagram a:link {
display: block;
color: black;
font-size: 17px;
border-style: solid;
border-width: 1px;
border-color: black;
background-color: #dfc3da;
padding: 5px;
margin: 5px;
}
.instagram a:visited {
display: block;
color: black;
background-color: #dfc3da;
}
.instagram a:hover {
color: black;
display: block;
background-color: #b5a6b2;
}
Step 5: Customize your CSS
You don’t need to be able to read HTML or CSS to modify the basics of the above codes. You now have the style of a LinkTree and you can adapt it to your own design of your website. Some tips for this are:
Font-size: Don’t go below 15 to keep it legible on phones.
Border: Here you can adjust the border of the link boxes in style, size and color.
Color: When you choose CSS colors, you can write a base color like ‘red’ or ‘black’, but you can also use the HEX code. For example #000000 (black) or #080FF (blue).
Background-color: Here you can (of course) adjust the color of the background.
Padding: This is the amount of space between the text and the border around it.
Margin: This is the amount of space between the objects or links. So the outer edge.
Now let’s look at the different sections of the above code. The first section is .instagram, and refers to the whole. Like a big box around the whole link part.
The second section is .instagram a: link. This is the link style that overrides your current theme link style. If you remove this, the link style of your WordPress theme will be used (which you probably don’t want).
The third part says .instagram a:visited and determines what the links that have already been visited look like. You probably want these to look the same as the unvisited links, so I wouldn’t change anything unless you want to give them a different background color or style.
The fourth part is .instagram a:hover and determines what a link looks like when the mouse hovers over it. This doesn’t matter much for mobile because you don’t have a mouse there, but for a regular computer or laptop it would make a difference. In this code above, only the background color is different. You can also adjust the size or color of the text, make it bold or set a different border. To do this you need to add this extra in the CSS section.
You can change the text ‘Instagram’ to anything, but you have to do this for all parts. And be sure to use a term that isn’t already used elsewhere in your CSS.
Step 6: Add your own links
You’ve done the hardest part! Save your new CSS and go back to the page you created earlier. Add a new HTML part. You can do this by switching from formatted text to HTML in WordPress, or by adding an HTML block in Block editor. In Squarespace you can use the code ‘Injection feature’.
If you’ve changed the name .Instagram to something else, make sure you change it in the code above as well. Now you can replace the links with your own links that you want in your LinkTree and possibly add more links.
<div class="instagram"> <a href="#home">Blog Name</a> <a href="LINK URL">LINK TEXT</a> <a href="LINK URL">LINK TEXT</a> <a href="LINK URL">LINK TEXT</a> </div>
Step 7: Add a bio
Finally, you can add a short biography at the end to make it more personal. In Instagram you can only put very little in your bio, so this is an extra chance to introduce yourself to your followers.
Step 8: Save and Publish
That was it! It’s time to save and publish. You can always go back in your CSS to change the color or style.
I hope it is of some use for you. It may seem like a lot of hassle, but seeing that number of visitors to your website go up is really worth it.
