LinkTree is een gratis pagina die al jouw links op een smartphone vriendelijke manier onder elkaar toont en is perfect voor je social media. Vooral voor Instagram is een LinkTree pagina maken heel handig, omdat je hier maar weinig opties hebt om links te plaatsen.
Maar wist je al dat je jouw eigen LinkTree kan maken en daarmee je websiteverkeer kan verhogen? En dat wil je!
Het goede nieuws is dat je heel makkelijk jouw eigen LinkTree op jouw website kan maken, zonder kennis te moeten hebben over HTML of CSS. In dit artikel vertel ik je met welke codes je een LinkTree pagina kan maken op je eigen website en je website verkeer binnen no-time een boost geeft!
Een goede LinkTree pagina heeft een paar dingen nodig:
Klinkt gemakkelijk toch?
Om te beginnen, log je in op je website. Ik laat je in dit artikel zien hoe ik het in mijn WordPress pagina toevoeg, wanneer je een ander platform gebruikt, zal je eenzelfde soort links moeten gebruiken. Je kan ook altijd dezelfde codes gebruiken!
In WordPress klik je op Pages > Add new.
Je slug is niet hetzelfde als de naam van je pagina. Het is wat volgt na www.website.com/jouw-slug-hier. Je wilt dit in dit geval kort en simpel houden. Ik raad je aan iets als ‘Links’ of ‘Instagram’ te gebruiken, zodat je het gemakkelijk herkent en onthoudt.
In WordPress kan je jouw URL aanpassen in de permalink sectie of met behulp van de Yoast SEO plugin. In Squarespace doe je dit onder het tabje ‘Basics’.
Vervolgens wil je een titel op je pagina toevoegen. Dit hoeft niet dezelfde te zijn als je slug, maar is je officiële naam van je LinkTree. Dit kan iets simpels als ‘Hi Instagram!’ zijn.
Hieronder kan je een bio afbeelding plaatsen, maar dit hoeft niet. Je kan er ook voor kiezen om hem onderaan je links te zetten, of helemaal weg te laten. Die keuze is aan jou. Een ronde afbeelding vind ik er altijd mooi uitzien en hiermee blijf je ook in de social media stijl. Je kan deze in Canva opmaken of een linktool als deze gebruiken.
Jouw LinkTree heeft natuurlijk jouw eigen links nodig! Hierbij komt wat codeerwerk kijken. Je kan natuurlijk links toevoegen in je gebruikelijke link stijl, maar dan heb je niet die LinkTree stijl die er zo goed uit ziet op smartphones.
Bewaar een draft van je pagina en ga naar je ‘Appearance’ tab in WordPress. Je kan deze ook in een nieuw tabblad openen. We zullen wat op maat gemaakte CSS toe moeten voegen, dus open niet je Theme Editor, maar de ‘customization’ shortcut. Deze vind je bij Appearance > Customize > Custom CSS. Hier vind je het in Squarespace.
Nu komt het leuke gedeelte! Je gaat op maat gemaakte CSS toevoegen, wat er voor zorgt dat het er netjes en in een mooie stijl uitziet. We voegen wat gemaakte blok links toe omdat deze makkelijk aan te passen zijn en er goed uit zien op je mobiel. Het is ook wat LinkTree gebruikt en wat je dus ook zelf kan maken.
Plak de volgende code in je 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;
}Je hoeft HTML of CSS niet te kunnen lezen om de basis van bovenstaande codes aan te kunnen passen. Je hebt nu de stijl van een LinkTree en deze kan je aanpassen aan je eigen ontwerp van je website. Een aantal tips hiervoor zijn:
Laten we nu kijken naar de verschillende secties van de bovenstaande code. De eerste sectie is .instagram, en verwijst naar het geheel. Als een grote box om het hele link gedeelte heen.
Het tweede gedeelte is .instagram a: link. Dit is de stijl van de link die je huidige thema link stijl overschrijft. Als je dit weghaalt, wordt de link stijl van je WordPress thema gebruikt (wat je waarschijnlijk niet wilt).
Bij het derde gedeelte staat .instagram a:visited en bepaald hoe de links eruitzien die al bezocht zijn. Deze wil je er waarschijnlijk hetzelfde uit laten zien als de onbezochte links, dus hier zou ik niks aan veranderen, tenzij je ze een andere achtergrond kleur of stijl wilt geven.
Het vierde gedeelte is .instagram a:hover en bepaald hoe een link eruit ziet als de muis eroverheen gaat. Dit maakt voor mobiel niet zo veel uit omdat je daar geen muis hebt, maar voor een gewone computer of laptop zou dit wel verschil maken. In deze bovenstaande code is alleen de achtergrond kleur anders. Je kan ook de grootte of de kleur van de tekst aanpassen of het dikgedrukt maken of een andere rand instellen. Om dit te doen moet je dit extra toevoegen in het CSS gedeelte.
De tekst ‘Instagram’ kan je in alles veranderen, maar dit moet je dan wel doen voor alle gedeeltes. En zorg er wel voor dat je een term gebruikt die niet al ergens anders in je CSS gebruikt wordt.
Het moeilijkste gedeelte heb je gehad! Bewaar je nieuwe CSS en ga terug naar de pagina die je eerder had aangemaakt. Voeg een nieuw HTML gedeelte toe. Dit kan je doen door te switchen van opgemaakte tekst naar HTML in WordPress, of door een HTML blok in Block editor toe te voegen. In Squarespace kan je de code ‘Injection feature’ gebruiken.
Zorg ervoor dat wanneer je de naam .Instagram in iets anders hebt veranderd, dat je dit ook wijzigt in de code hierboven. Nu kan je de links vervangen met jouw eigen links die je in je LinkTree wilt hebben en eventueel nog meer links toevoegen.
<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>
Als laatst kan je een korte biografie aan het eind toevoegen om het wat persoonlijker te maken. In Instagram kan je maar heel weinig in je bio kwijt, dus dit is een extra kans om jezelf te introduceren aan je volgers.
Dat was het! Het is tijd om op te slaan en te publiceren. Je kunt altijd nog terug in je CSS om de kleur of stijl toch nog iets aan te passen.
Ik hoop dat je hier wat aan hebt. Het lijkt misschien heel veel gedoe, maar het is het echt waard om dat aantal bezoekers op je website omhoog te zien gaan.
Wil je nu meer leren over het verkopen via Instagram? Ik heb speciaal hiervoor een digitale gids gemaakt die je alles leert, van het laten groeien van je account, het aantrekken van je ideale klant tot betaald krijgen voor wat je leuk vindt. Deze gids heeft 45 pagina’s en helpt jou groeien met je Instagram en het aantrekken van klanten.
WIN EEN GRATIS COACHING CALL! KLIK HIER!
Verkopen via Instagram: Hoe pak je het aan?
Belemmerende overtuigingen die in de weg staan van je succes
