Zo maak je een Squarespace-website meertalig, gratis!

Webdesign & Websiteontwikkeling
Geschreven door Robien Hali

Laatste update: december 2025 — werkt met de nieuwste Squarespace-interface.

Je wilt je website twee- of meertalig maken, maar het voelt op dit moment niet goed om er maandelijks geld aan uit te geven. Dat is begrijpelijk en ook niet nodig, want in deze blog deel ik een gratis methode met je, die ik gebruik voor mezelf en voor mijn klanten.

Je ontkomt bij de methode in deze blog niet aan het copy-pasten van code. Zie je dat niet zitten, dan geef ik je twee andere mogelijkheden waarbij dat niet nodig is: eentje betaald, eentje gratis.

Weglot

Wat wel belangrijk is om te weten, eventueel voor een later stadium in je business: Squarespace hééft een hele mooie en eenvoudige oplossing om je website meertalig te maken. Er is namelijk een integratie met Weglot, wat ook de vertaalmachine van Shopify is, wat misschien wel genoeg zegt over de mogelijkheden. 

Het nadeel daarvan, is dat het niet goedkoop is. Als jouw website maar heel klein is, maximaal 2000 woorden, dan kun je gebruikmaken van het gratis plan. Maar anders begint het bij ongeveer €15 per maand op het moment dat ik deze blog schrijf (bekijk de actuele prijzen even op de site van Weglot zelf).  

Als het uitgeven van €’s voor jou geen probleem is, dan zou ik er zeker voor kiezen. Je kunt alles door Weglot laten vertalen, maar je kunt de teksten ook bewerken, dat is natuurlijk wel belangrijk! 

Squarespace heeft een duidelijke uitleg over de installatie, mocht je met Weglot aan de slag willen gaan. Die kun je vinden in hun helpcentrum. En wil je een voorbeeld zien? Squarespace gebruikt het zelf, ze hebben gekozen voor een taalwisselaar in de footer (maar die kan overal). Ik heb het geprobeerd, en het zo klaar. Je moet wel even een subdomein aanmaken en koppelen, maar ook dat is eigenlijk een piece of cake.

Code-vrij 

Voordat ik mijn favoriete manier benoem, wil ik ook nog een simpele, code-vrije manier met je delen, die voor sommige websites echt prima zou kunnen werken.

Je maakt dan een folder met een dropdown (uitklapmenu). In plaats van een menu (navigatie) met ‘home, over, aanbod’ et cetera, maak je een menu met (stel jouw website is Engels en Nederlands) ‘English, Nederlands’. En dan onder de talen zet je in het uitklapmenu de pagina’s per taal.

Je moet dan wel een website hebben met eenvoudige navigatie, want je kunt geen dropdown in een dropdown maken. Klik op deze link voor een voorbeeld daarvan (niet door mij gemaakt).

Google Translate

Voor het complete plaatje: je kunt ook nog met Google Translate werken. Maar omdat je geen controle hebt over de vertalingen, vind ik dat geen geschikte optie en heb ik daar verder ook nooit tijd in gestopt. Maar er zijn zeker blogs en video’s over te vinden. 

Voorbeeld van de custom code om een Squarespace-website meertalig te maken.

De Brad-Good-methode

Dan komen we, last but not least, eindelijk aan bij mijn favoriete methode als je op zoek bent naar een gratis manier. Ik heb die methode niet zelf bedacht, de credits gaan naar Brad Good, een Squarespace Expert, Designer & Developer. Hij heeft er een blog over geschreven met de volledige uitleg. Zijn methode gebruik ik al jaren voor tweetalige websites van mijn klanten, zeker wanneer ze een Squarespace meertalige website willen zonder maandelijkse kosten. En ik ben niet de enige, de ‘Brad-Good-methode’ is een begrip onder Squarespace-webdesigners. 

De code hieronder werkt in Squarespace 7.1 en is geschreven voor een Nederlandstalige site met een tweede taal (in mijn voorbeelden: Engels). Voor mijn klant gebruik ik exact dezelfde aanpak voor Nederlands en Duits.

Nadeel

Daar begin ik maar mee, want als je niet met dit nadeel kan leven, dan hoef je je verder ook niet te verdiepen in deze methode.

Wanneer een pagina wordt geladen, worden eerst alle menu-items voor alle beschikbare talen weergegeven, en daarna wordt het menu pas aangepast door JavaScript, als het filterproces is voltooid. Je ziet dus even een soort flits: héél kort een “te lang” menu, dat daarna opschoont.

Ik heb één keer een manier getest om dat te vermijden, maar dan laadden de pagina’s weer langzamer; dat vond ik nog nadeliger. Ik kan leven met die mini-flits, maar ik snap het ook als jij dat niet mooi vindt. Check het uit op deze site van mijn klant.

Past die kleine flits niet bij jouw website en vind je een iets tragere laadtijd geen probleem, dan staat onderaan deze blog een alternatieve oplossing. Zelf kies ik ‘m niet, maar misschien werkt hij voor jou wel fijn.

Updates

Squarespace verandert af en toe dingen achter de schermen en Brad werkt zijn script bij als dat nodig is. Ik doe dat ook, maar ben er niet altijd als de kippen bij ;-). ChatGPT kan je ook altijd helpen om de code aan te passen aan de laatste wijzigingen van Squarespace.

Hier moet je even over nadenken voordat je begint

Het fijne is dat behalve tijd, deze optie je verder niks kost. Je moet wel heel precies kunnen werken, want als er één minifoutje in de code staat, werkt niks. Verder moet je wijzigingen altijd zelf in alle talen doorvoeren, dus het blijft meer tijdrovend dan bijvoorbeeld de Weglot-optie. 

En goed om van tevoren te realiseren: je hebt maar één footer - die vertaalt niet mee. Daar moet je ook rekening mee houden. 

Wat voor soort taalwisselaar

Vooraf is het fijn om even te bedenken wat jij als taalwisselaar wilt gebruiken. Je hebt hiervoor twee opties: 

  • Je kunt een voorblad gebruiken, dat is dan je homepage waar je de juiste taal kunt kiezen. Je kunt dan in de footer ook twee buttons neerzetten om van taal te verwisselen. 

  • Als je liever niet met een voorblad werkt, maar op elke pagina van taal wilt kunnen wisselen (via een eenvoudige language switcher, met tekst of vlaggetjes), krijg je rechts bovenin een taalwisselaar. Een voorbeeld met geschreven tekst vind je op de site van deze klant, Een voorbeeld met vlaggetjes kun je zien bij deze website van mijn klant.

Let op: met de taalwisselaar ga je altijd naar de homepage van de andere taal, niet naar dezelfde subpagina in de andere taal (dat kun je met extra custom code wel bouwen, maar dat valt buiten deze blog).

Business-account

Belangrijk: je kunt deze methode niet toepassen als je alleen een Personal-account hebt bij Squarespace. Je hebt minimaal een Business-account nodig. Bekijk de prijzen hier.

 

Stappenplan: zo maak je je site meertalig

Als je bent ingelogd op je Squarespace-website ga je naar → Settings → Billing → Subscriptions → Website → upgraden naar Business als dat nodig is.

Als je nog nooit code aan je website hebt toegevoegd, don’t worry. Hieronder vind je eenvoudig te volgen stappen, dat kun je echt! 

Stap 1 - URL-structuur per taal

Ik ga in dit voorbeeld uit van Nederlands (NL) en Engels (EN).

  • Maak een nieuwe pagina en noem deze “Home”. Of gebruik je bestaande homepage.

  • Klik op het tandwieltje → paginagegevens.

  • Pas de URL aan van /home naar /nl/home.

  • Voeg bij alle Nederlandstalige pagina’s nl/ toe aan het begin van de pagina-URL
    Voorbeeld:

    • /over → /nl/over

    • /contact → /nl/contact

Stap 2 - Pagina’s dupliceren voor de tweede taal

Ik ga ervan uit dat de site die je maakt hetzelfde is in beide talen.

  • Klik op het tandwieltje van een Nederlandse pagina → DUPLICATE PAGE.

  • Onderaan bij Not linked verschijnt de kopie met (Copy) erachter.

  • Sleep die kopie naar de gewenste plek in de navigatie (ik zet de EN-versie altijd onder de NL-versie, dat is overzichtelijk).

  • Pas paginatitel en navigatietitel aan (en verwijder “(Copy)”).

  • Soms blijft de naam hetzelfde (“Home” in meerdere talen). Dan moet je zelf goed opletten wat wat is.

  • Pas ook de URL aan:

    • /nl/home → /en/home

    • /nl/over → /en/about

    • etc.

Let op: je ziet nu bovenin een veel te lang menu met alle navigatietitels in beide talen. Dat is normaal. Dat lossen we zo op met het script.

Vergeet niet:

  • Alle teksten vertalen/vervangen.

  • SEO-omschrijvingen van zowel pagina’s als afbeeldingen nalopen (afbeeldingen moet je soms opnieuw invoegen om de alt-tekst per taal goed te krijgen).

Stap 3 - Code toevoegen in de Footer (Code Injection)

Nu gaan we de code toevoegen die:

  • aan de hand van de URL bepaalt of je op de Nederlandse of Engelse versie zit (/nl/... of /en/...),

  • in het menu alleen de links van die taal laat staan,

  • en (optioneel) een taalwisselaar met vlaggetjes kan tonen.

Ga naar:

  • Ga in Squarespace naar Website → Pages → Custom Code → Code Injection.

  • Onder Footer plak je deze code (voor NL/EN):

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(function() {

/* === BASISINSTELLINGEN === */

var defaultLanguage = 'nl';

var lang = location.pathname.split("/")[1]; // 'nl', 'en' of leeg

var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";

// Als je op de homepage zit (geen /nl/ of /en/), gebruik default

if (!lang || lang.length > 2) {

lang = defaultLanguage;

}

/* === TAAL HERKENNEN IN HET MENU === */

// Logo / home-link → behandelen als default-taal

$('a[href="/"]').addClass('lang-' + defaultLanguage)

.parents(itemParent)

.addClass('lang-' + defaultLanguage);

// Alle interne links analyseren

$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {

var href = $(this).attr('href') || "";

var langType = href.split("/")[1]; // 'nl' of 'en'

if (langType && langType.length <= 2) {

var multiClass = 'multilanguage lang-' + langType;

$(this).addClass(multiClass)

.parents(itemParent)

.addClass(multiClass);

}

});

/* === HOMEPAGE-LOGO: LINKT NAAR JUISTE TAAL === */

if (lang === "en") {

$('a[href="/"]').attr("href", "/en/home/");

}

/* === EXCEPTIES (ALTIJD ZICHTBAAR) === */

$('.exclude-me, .exclude-me a').addClass('exclude');

$('.sqs-svg-icon--list a, .SocialLinks-link, .header-menu-controls-control').addClass('exclude');

/* === ANDERE TAAL UIT HET MENU HALEN === */

$('.multilanguage')

.not('.lang-' + lang + ', .exclude')

.remove();

});

</script>

 

Stap 4 - Taalwisselaar stylen

Op dit punt zouden we alleen nog maar de Nederlandse óf Engelse menu-items moeten zien (afhankelijk van de URL). Je moet nu bepalen hoe bezoekers van taal kunnen wisselen: via een voorblad, via tekst, of via vlaggetjes.

Optie 1 — Voorblad (taalkeuzepagina)

Als je werkt met een voorblad waarin bezoekers eerst hun taal kiezen, dan ben je nu eigenlijk klaar.

Je maakt dan:

  1. Een nieuwe pagina met bijvoorbeeld twee knoppen: “Nederlands” en “English”.

  2. Deze link je naar /nl/home en /en/home.

  3. Stel die pagina in als homepage (via het tandwieltje → Set as Homepage).

  4. Zet deze pagina in Not linked.

Dit is de meest eenvoudige manier, vooral als je een rustige, minimalistische site wilt.

Optie 2 — Taalwisselaar met geschreven tekst (bijvoorbeeld: Nederlands | English)

Wil je bovenin de site een simpele taalwisselaar zoals Nederlands | English, zoals mijn client van Zest42 wilde, dan voeg je onder jouw eerder geplaatste code deze extra regel toe:

 

/* LANGUAGE SWITCHER – TEKST */

$('body').prepend('<div class="language"><a href="/nl/home" class="lang-nl">Nederlands</a> | <a href="/en/home" class="lang-en">English</a></div>');

 

Daarna kun je in Website → Pages → Custom Code → Custom CSS de taalwisselaar mooi stijlen, bijvoorbeeld:

 

/* taalwisselaar bovenin de site */

.language {

position: absolute;

top: 12px;

right: 20px;

z-index: 9999;

}

.language a {

color: #fff; /* pas aan naar je eigen merkstijl */

text-decoration: none;

margin-left: 6px;

}

.language a:hover {

opacity: .8;

}

 

Optie 3 — Taalwisselaar met vlaggetjes

Je kunt in plaats van de namen ook vlaggetjes gebruiken als taalwisselaar, daar heeft mijn klant van Landgoed Nollenweijde voor gekozen. Is jouw site niet Engels | Nederlands maar werk je met andere talen, kunt de juiste landcode voor de vlaggetjes hier vandaan halen.  

Plaats deze code helemaal bovenaan je script, direct boven de code die je al hebt ingevoerd (in het Footer-gedeelte bij Website → Pages → Custom Code → Code Injection).

 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">

 

En plaats bijna onderaan je multilanguage-script (maar nog vóór }); en </script>) dit blok:

 

/* LANGUAGE SWITCHER – VLAGGETJES */

$('body').prepend(

'<div class="language">' +

'<a href="/nl/home" class="lang-nl"><span class="flag-icon flag-icon-nl"></span></a> ' +

'<a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-gb"></span></a>' +

'</div>'

);

 

Ook hiervoor kun je CSS toevoegen:

 

.language {

position: absolute;

top: 12px;

right: 20px;

z-index: 9999;

}

.language .flag-icon {

font-size: 20px;

margin-left: 6px;

}

 

Nu zou het moeten werken! En werkt het niet, check dan de code even of voer ’m nog een keer opnieuw in - een foutje is zó gemaakt en dat kan iedereen gebeuren. Mits alles foutloos is ingevoerd, werkt deze methode gegarandeerd. Dat kun je ook zien in de voorbeelden die ik hierboven liet zien.

Brad-Good-methode zonder verspringen (maar met langere laadtijd)

Voor de volledigheid deel ik nog een alternatief voor wie de korte ‘flits’ van het menu niet mooi vindt. In deze variant laden we eerst een wit scherm, en pas wanneer het menu is opgeschoond (en alleen de juiste taal zichtbaar is), verdwijnt dat scherm. De pagina laadt hierdoor wel trager.

Belangrijk: deze code plaats je in het Header-gedeelte van Website → Pages → Custom Code → Code Injection - dus níet bij Footer, zoals de hoofd-methode.

Copy-paste de onderstaande code en kijk wat je ervan vindt:

 

<style>

/* Wit laadscherm over de hele pagina */

#loading-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: white;

z-index: 9999;

display: flex;

justify-content: center;

align-items: center;

font-size: 20px;

color: black;

}

</style>

<div id="loading-overlay">Loading...</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

var defaultLanguage = 'nl';

var lang = location.pathname.split("/")[1]; // 'nl', 'en' of leeg

var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";

if (!lang || lang.length > 2) {

lang = defaultLanguage;

}

/* MENU-ITEMS PER TAAL HERKENNEN */

$('a[href="/"]').addClass('lang-' + defaultLanguage)

.parents(itemParent)

.addClass('lang-' + defaultLanguage);

$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {

var href = $(this).attr('href') || "";

var langType = href.split("/")[1];

if (langType && langType.length <= 2) {

var multiClass = 'multilanguage lang-' + langType;

$(this).addClass(multiClass)

.parents(itemParent)

.addClass(multiClass);

}

});

/* HOMEPAGE-LOGO NAAR DE JUISTE TAAL */

if (lang === "en") {

$('a[href="/"]').attr("href", "/en/home/");

}

/* ITEMS DIE ALTIJD ZICHTBAAR MOGEN ZIJN */

$('.exclude-me, .exclude-me a').addClass('exclude');

$('.sqs-svg-icon--list a, .SocialLinks-link, .header-menu-controls-control').addClass('exclude');

/* ALLES WEGHALEN WAT NIET BIJ DE HUIDIGE TAAL HOORT */

$('.multilanguage')

.not('.lang-' + lang + ', .exclude')

.remove();

/* EXTRA — toont alleen de juiste taal (veiligheidsnet) */

$('.lang-' + lang).css('display', '');

/* Laadscherm verbergen wanneer alles klaar is */

$('#loading-overlay').fadeOut(300);

});

</script>

 

Nog één ding

Nu je toch zo precies bezig bent: download hier mijn gratis checklist met 16 snelle fixes voor je website - dingen die vaak misgaan bij ondernemers op het gebied van:

  • techniek (fijn om vroeg bij te zijn),

  • gebruiksvriendelijkheid (voorkomt irritatie bij bezoekers),

  • en de know-like-trust-factor die uiteindelijk bepaalt of iemand klant wordt.

Je website is voor veel mensen de eerste indruk van jou of je bedrijf - en die kun je maar één keer maken.

Heb jij trouwens zelf nog een andere manier om je site meertalig te maken? Laat het me vooral weten hieronder!

En wil je weten hoe je passief inkomen kunt verdienen met de kennis die je gewoon in huis hebt? Lees dan deze blog!

Robien Hali https://robien.nl
Vorige

Kan AI een webdesigner vervangen? Dit is wat je moet weten!
Volgende

Squarespace versus de rest: welk CMS-systeem is het meest geschikt voor jou?