*This post contains affiliate link(s). An affiliate link means I may receive an advertising/referral fee if you make a purchase through my link, without any extra cost to you. You can read more on my affiliate disclosure HERE.

"Check the Link In My Bio"

We all know this phrase WAY too well, and it comes from the lack of links being posted within Instagram posts. Instagrammers leverage this single link in many ways, either by switching the link up according to what their post was about, or linking to a new blog, or what we all see often – a Linktree.

A “Linktree” is a way to leverage Instagram’s single bio link, and it serves as a link that houses a multitude of other links to funnel visitors into. We used Linktree for awhile, and being there were some elements we didn’t like, we decided to create our own on our own WordPress website. We are sharing our step-by-step process on how to set up your own Linktree within your website!

We use Elementor for our theme, however you can apply the same concept to other themes as well!

Pros

1. SEE HOW MUCH TRAFFIC EACH LINK IS GENERATING (PRO FEATURE)
On their pro feature ($6/mo) Linktree offers the ability to see how many clicks each link is receiving. You can evaluate which links are more popular than others.

2. PRE-SCHEDULE WHEN LINKS APPEAR (PRO FEATURE)
If you’ll be launching a new course soon you can pre-schedule when you want links to appear, or when you want them to be hidden after an offer expires.

cons

1. ANALYTIC BREAK
Although traffic is going to your website in the end, you are still redirecting the traffic from Instagram, to LinkTree, then to your website. This POTENTIALLY could lose someone within that link. You want to send ALL your traffic to your website directly. When you are evaluating your analytics, and wanting to see your sources of traffic, using a third-party provider like Linktree will come up as an “other” field, instead of Instagram – which gives a semi-false reading for your marketing strategy.

2. LACK OF BRANDING CUSTOMIZATION
Linktree does offer the ability to choose the colors of the appearance, however, it can’t truely match your branding – or how you want to start the experience with your clients.

3. NO OPTION FOR SUBHEADERS
Adding more information on a link helps your vistiors see all that you’re offering – and lead them to exactly where they want to go.

I'm Using Divi
I'm Using Elementor
Wild Spirit Development

The Set Up

  1.  CREATE A NEW PAGE
    In your website on WordPress, create a new page. The name you choose for the page will default what the url will be. ie: https://www.yoururl.com/linktree – which will be the same appearance it has on your Instagram bio.
  2. ENABLE DIVI BUILDER 
    Once you have set a page name, click on ENABLE DIVI BUILDER to apply the Divi Builder to this page.
  3. SET PAGE ATTRIBUTE
    Set your Page Attributes Template to Canvas. This will remove the header and footer of the page so your page is blank.

    (These are found on the right, under your Publish box, or you can find them once within the page builder under Settings – General Settings – Page Layout)

    Once you’ve set this, hit Update under Publisher to save your changes. When the page reloads after saving, click on Enable on Divi Builder to go to the front of the page and visually build out your Linktree.

Page Structure

The framework of a Linktree page is fairly simple you’ll need:

  • One Section
  • One Single Column
  • Widgets
    • 1 Image Widget (your logo)
      (Depending on your links)
    • Button Widgets
    • Text Widgets

1. Add a Regular Section

You can either leave this a solid white/blank color – or you can use an image/pattern like we have by setting the background to an image. We applied a parallax to give some dynamic appearance to the page.

2. Add a Single Column

If you’re using a background color or image, set this background to something that will stand out, we usually recommend White. To make it stand out more you can add a dropshadow to the row to add a 3-D effect.

Spacing

  • Padding: Top: 50px Bottom 0px Left: 0px Right: 0px

3. Add an Image Widget for your logo/headshot

Recommended image size 250px x 250px (you don’t want this too large), just enough to brand it to yourself

4. Add a Button Widget

Create one for right now, and style it – then you can duplicate it over and over to match the rest.
Alignment: Center

Button: Select Use Custom Styles for Button (this will be to replicate what is in the screenshot, but you can customize to your branding and like)

  • Button Text Size: 20px
  • Button Text Color: #FFFFFF (white)
  • Button Background Color:  #686868 (grey)
  • Button Text Spacing: 4px
  • Button Font Style: Select All Caps

Spacing

  • Margin: Top: 10px Bottom:  10pm
  • Padding: Left: 75px Right 75px (will depend on your link name length so it doesn’t break the line – this you can alter once you get your link names in)

After you’re done customizing the look of your button, duplicate it as many times as you need for the links you want to feature on your Linktree. Just go through after and set the text & links **SEE LINK ANALYTICS BELOW FOR HOW TO VIEW CLICKS ON EACH LINK**

5. Add a Text Widget

This module will be for a minimal footer
Copyright © (alt + 1 69) [year], Your Business Name

Background: #333333 Recommend a darker grey color, or whatever matches currently on your site

Text

  • Text Font Style: All capitals
  • Text Color: #FFFFFF (white)
  • Text Text Size: 14px
  • Text Letter Spacing: 2px

Spacing

  • Margin: Top: 50px Bottom:0 px (this will set 50px space between your last button, and then have this bar at the bottom of your white row)
  • Padding: Top: 15px Bottom 15px

Getting It To Work

Now that you have your framework built, let’s connect it to ensure you’re tracking link clicks.
One feature Linktree offers which will help you view your analytics and what people are clicking on is their Link Stats, you can replicate this by using a site like Bit.ly to create short links that track clicks. 

With Bit.ly you would take whatever page/post link you have; ie: yourlink.com/post-title-here and then create a new link within Bit.ly. It will then generate a short link for you. Copy that shortlink, and past within the Link box for your buttons. it’s easy to track and see how many times a button has been clicked, and you can see where the traffic is coming from. (Facebook, Instagram, Email, Referall, SMS, etc)

Publish & Save

BE SURE TO SAVE YOUR WORK!

The most important part is to save all your work, make it a habit of saving intermittently while your creating this page! You can save either by clicking the green save button, or by hitting CNTRL + S, or CMND + S(mac) to save. Additionally, ensure your page is set to publish by clicking Edit Page in the upper right Admin Bar to go to the backend of your page. Ensure under the Publish panel it says published. If so, your LinkTree is now LIVE! Copy the Permalink to share your page in your IG bio, or anywhere you like! Make sure you TEST your permalink on both your computer and phone to ensure it is working correctly, and looks right before adding it to your Instagram profile bio.

Wild Spirit Development

The Set Up

  1.  CREATE A NEW PAGE
    In your website on WordPress, create a new page. The name you choose for the page will default what the url will be. ie: https://www.yoururl.com/linktree – which will be the same appearance it has on your Instagram bio.
  2. ENABLE DIVI BUILDER 
    Once you have set a page name, click on ENABLE DIVI BUILDER to apply the Divi Builder to this page.
  3. SET PAGE ATTRIBUTE
    Set your Page Attributes Template to Canvas. This will remove the header and footer of the page so your page is blank.

    (These are found on the right, under your Publish box, or you can find them once within the page builder under Settings – General Settings – Page Layout)

    Once you’ve set this, hit Update under Publisher to save your changes. When the page reloads after saving, click on Enable on Divi Builder to go to the front of the page and visually build out your Linktree.

Page Structure

The framework of a Linktree page is fairly simple you’ll need:

  • One Section
  • One Single Column
  • Widgets
    • 1 Image Widget (your logo)
      (Depending on your links)
    • Button Widgets
    • Text Widgets

1. Add a Regular Section

You can either leave this a solid white/blank color – or you can use an image/pattern like we have by setting the background to an image. We applied a parallax to give some dynamic appearance to the page.

2. Add a Single Column

If you’re using a background color or image, set this background to something that will stand out, we usually recommend White. To make it stand out more you can add a dropshadow to the row to add a 3-D effect.

Spacing

  • Padding: Top: 50px Bottom 0px Left: 0px Right: 0px

3. Add an Image Widget for your logo/headshot

Recommended image size 250px x 250px (you don’t want this too large), just enough to brand it to yourself

4. Add a Button Widget

Create one for right now, and style it – then you can duplicate it over and over to match the rest.
Alignment: Center

Button: Select Use Custom Styles for Button (this will be to replicate what is in the screenshot, but you can customize to your branding and like)

  • Button Text Size: 20px
  • Button Text Color: #FFFFFF (white)
  • Button Background Color:  #686868 (grey)
  • Button Text Spacing: 4px
  • Button Font Style: Select All Caps

Spacing

  • Margin: Top: 10px Bottom:  10pm
  • Padding: Left: 75px Right 75px (will depend on your link name length so it doesn’t break the line – this you can alter once you get your link names in)

After you’re done customizing the look of your button, duplicate it as many times as you need for the links you want to feature on your Linktree. Just go through after and set the text & links **SEE LINK ANALYTICS BELOW FOR HOW TO VIEW CLICKS ON EACH LINK**

5. Add a Text Widget

This module will be for a minimal footer
Copyright © (alt + 1 69) [year], Your Business Name

Background: #333333 Recommend a darker grey color, or whatever matches currently on your site

Text

  • Text Font Style: All capitals
  • Text Color: #FFFFFF (white)
  • Text Text Size: 14px
  • Text Letter Spacing: 2px

Spacing

  • Margin: Top: 50px Bottom:0 px (this will set 50px space between your last button, and then have this bar at the bottom of your white row)
  • Padding: Top: 15px Bottom 15px

Getting It To Work

Now that you have your framework built, let’s connect it to ensure you’re tracking link clicks.
One feature Linktree offers which will help you view your analytics and what people are clicking on is their Link Stats, you can replicate this by using a site like Bit.ly to create short links that track clicks. 

With Bit.ly you would take whatever page/post link you have; ie: yourlink.com/post-title-here and then create a new link within Bit.ly. It will then generate a short link for you. Copy that shortlink, and past within the Link box for your buttons. it’s easy to track and see how many times a button has been clicked, and you can see where the traffic is coming from. (Facebook, Instagram, Email, Referall, SMS, etc)

Publish & Save

BE SURE TO SAVE YOUR WORK!

The most important part is to save all your work, make it a habit of saving intermittently while your creating this page! You can save either by clicking the green save button, or by hitting CNTRL + S, or CMND + S(mac) to save. Additionally, ensure your page is set to publish by clicking Edit Page in the upper right Admin Bar to go to the backend of your page. Ensure under the Publish panel it says published. If so, your LinkTree is now LIVE! Copy the Permalink to share your page in your IG bio, or anywhere you like! Make sure you TEST your permalink on both your computer and phone to ensure it is working correctly, and looks right before adding it to your Instagram profile bio.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

1 thought on “Creating a Custom Linktree to Stand Out From the Crowd”

  1. Hello!

    Thank you for this tutorial.

    Two questions,

    I have a WordPress theme but am considering the Divi builder plugin to create a link tree style landing page. Will the DB plug-in have options to make this page?

    If so, will the custom button settings you listed create a uniform width button no matter the length of your text? Or is there a way to do this in a “full page width” setting?

    Again thank you,
    Paula
    http://www.Dimplesonmywhat.com

Comments are closed.

Skip to content