Custom code en html op je Kajabi website

Kajabi is een pakket waarbij je in no time je hele website kan maken. Voor de meeste gebruikers is dat meer dan genoeg. Je kan prachtige website bouwen in Kajabi met de kant-en-klare website thema’s of landingspagina’s. Met het laatste template Encore kun je ieder tekstblokje, afbeelding, formulier helemaal vormgeven naar jouw eigen wensen.

Bekijk ons portfolio om te zien wat er allemaal met Kajabi mogelijk is.

Kajabi HTML fine tunen

Het kan altijd dat de standaard mogelijkheden niet voldoende zijn en dat het nodig is om de html code van je Kajabi website aan te passen. Ook die mogelijkheid bestaat. En zelfs daar bestaan verschillende opties voor. Je kan met enkele klikken al jouw eigen javascript of css code toevoegen. En als je echt dieper wilt, dan kun je de pagina’s helemaal op html basis opbouwen. Voor dat laatste heb je het grootste pakket van Kajabi nodig (Pro of Access).

Mocht je tegen technische vraagstukken aanlopen, daag ons dan maar uit. Ons motto is: ‘Als een ander zegt dat het niet kan in Kajabi, daar begint bij ons de uitdaging'. Meer weten over maatwerk?

Neem vrijblijvend contact met ons op 📞

In deze blog neem ik je mee door de verschillende mogelijkheden om de html code van Kajabi aan te passen. Dit kan op de volgende niveau’s:

1. In het html head gedeelte op alle pagina’s
2. Met javascript of css op een individuele pagina
3. Met custom code blokken op een website voor html en javascript.
4. Als html code onder teksten of blogs
5. Aan de achterkant van je templates via Code editing

In de video boven in de blog laat ik je zien hoe je een aantal manieren deze custom code op verschillende plaatsen binnen Kajabi kan gebruiken. Inmiddels zijn er nieuwe mogelijkheden, die ik in de tekst hieronder verder toelicht.

1. In de HTML head gedeelte van Kajabi

Externe tools zoals Google Analytics, Facebook, AddThis vragen je vaak om een stukje html of javascript te embedden op je website, zodat zij de activiteiten op je website kunnen volgen. Dit stukje code moet daarvoor op elke pagina komen. Kajabi biedt de mogelijkheid om dat direct op alle pagina’s te plaatsen.

Je kan deze code plaatsen door te gaan naar:
Kajabi > Settings > Site Details > Page Scripts

Door op het kleine vierkante te klikken rechtsonder, kun je het editor venster groter maken. Plak je nieuwe code direct onder de laatste code in dit gedeelte. Deze html of javascript code zal nu op alle pagina’s verschijnen in de head sectie van je pagina.

2. Plaats javascript of css op een individuele Kajabi pagina

Wanneer je code op een individuele pagina wilt plakken en niet op alle pagina’s, dan biedt Kajabi sinds hun Encore template de mogelijkheid om javascript of css code direct op die pagina te plakken. Ga daarvoor naar:
Kajabi > Website > Pages > Kies de pagina die je wilt bewerken > Customize (🎨) > Settings > Custom Code

Er zit een kleine technische lastigheid in deze code blokken. Kajabi zet al direct de opening- en sluiting tags <style></style> en <script></script> neer. Deze komen niet in beeld, en dat staat ook niet aangegeven. Wanneer je deze optie gebruikt, let erop dat je deze tags dan verwijdert, voor je de code plakt. 

3. Custom code blokken op een website voor html en javascript.

Sinds de Encore templates kun je op alle website pagina’s en landingspagina’s custom code blokken gebruiken. Deze blokken kun je overal inzetten en lenen zich ook op ter plaatse op je website wat extra html code te injecteren.

Een custom code blok in Kajabi kan alle code bevatten, mits in html geschreven. Binnen deze html code kun je dus ook javascript of css code opnemen. Wanneer je een bijzondere layout wilt hebben binnen jouw Kajabi pagina, dan heb je met het custom code block 100% vrijheid in programmeren.

Om custom code blokken voor html te gebruiken, ga je naar:
Kajabi > Website > Pages > Kies de pagina die je wilt bewerken > Customize (🎨) > Section > Add Block > Custom Code

4. Als html code onder teksten of blogs in Kajabi

Soms wil je heel lokaal iets aanpassen in de html code, bijvoorbeeld omdat je de look en feel van een bepaald woord wilt aanpassen, het lettertype grootte aan te passen, of een kleurverloop te maken.

Binnen de meeste tekstblokken in Kajabi kun je deze code toevoegen. Daarvoor klik je in de editor van dat betreffende tekstblok op het icoontje met < >. Dit kleine tekentje opent de html code van dat betreffende tekstblok (denk aan het onderwaterscherm van het geweldige WordPerfect 5.1, yep zo oud ben ik…) In dit scherm kun je alles weer helemaal naar je eigen hand zetten.

Om html op tekstblok niveau aan te passen, ga je naar:
Kajabi > Website > Pages > Kies de pagina die je wilt bewerken > Customize (🎨) > Section > Add Block > Text > Klik op < > icoontje

5. HTML code aan de achterkant van je templates via Code editing

De meest diepe plek waar je de html code binnen Kajabi kan aanpassen, is op het template niveau zelf (de achterkant van de achterkant). Hiervoor heb je het Pro pakket of Access pakket van Kajabi nodig. Dit biedt mogelijkheden waarmee je over de pagina’s heen aanpassingen kan maken, zoals het kopiëren van bepaalde gedeeltes van de ene pagina naar een andere. Of om het template helemaal te bewerken zodat er nieuwe mogelijkheden ontstaan die niet standaard in Kajabi zitten. Zoals wij hebben gedaan met ons Gamification template voor Kajabi producten. In dit nieuwe template kun je badges en certificaten uitreiken, Kun je lessen op slot zetten en kun je de styling van de cursussen veel makkelijker aanpassen. Hieronder zie je een voorbeeld van het aangepaste Momentum template voor een Kajabi cursus.

Voor de meeste ondernemers kom je hier op het gebied van abacadabra. En dit is het gebied waar wij ons graag uitleven. Wanneer je vragen hebt, dan moet je zeker even contact opnemen, want wij zijn er van overtuigd dat er een oplossing te vinden is. En een beetje nerd zijn we ook, we vinden het stiekem ook leuk om te doen en uitgedaagd te worden. 

En natuurlijk staan we ook voor je klaar voor alle andere vragen over Kajabi.

Conclusie custom codes in Kajabi

Er zijn vele mogelijkheden om Kajabi helemaal naar je eigen hand te zetten. Je weet nu hoe je zelf die extra html, css of javascript kun plaatsen op je website. En wanneer het echt lastig wordt, dan kunnen wij je helpen om op maat gemaakte toepassingen toe te voegen binnen jouw Kajabi website. Neem contact op om de mogelijkheden te bespreken.

Wil je met Kajabi aan de slag, meld je aan voor de gratis proefperiode van 30 dagen en krijg onze extra trainingen en ondersteuning er gratis bij. 

Aanmelden gratis proefperiode Kajabi

Veel succes,

Bastiaan