Zo maak je een Squarespace-website meertalig, gratis!
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 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 €15 per maand op het moment dat ik deze blog schrijf (bekijk de actuele prijzen hier).
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 hier vinden. 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 Engels en Nederlands is) ‘engels, 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. Dit is 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.
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, die je hier kunt bekijken. Zijn methode gebruik ik al jaren voor mijn eigen tweetalige website en die van mijn klanten. En ik ben niet de enige, de ‘Brad-Good-methode’ is een begrip onder Squarespace-webdesigners.
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. Ik heb 1x een manier gevonden om dat te vermijden, maar dan laadde de pagina’s weer langzamer, dat vond ik nog nadeliger. Ik kan er mee leven, maar ik snap het ook als je dat niet mooi vindt. Check het uit op deze site van mijn klant. Kun je hier niet mee leven, maar vind je het niet erg dat de pagina langzamer laadt, dan kun je de code helemaal onderaan deze blog gebruiken, die ik zelf dus niet ok vindt, maar misschien heb je er wat aan.
Updates
Brad werkt het script trouwens ook bij indien nodig, bijvoorbeeld als er grote veranderingen zijn binnen Squarespace. Het is dus zinvol om te kijken of de datum van zijn laatste update ligt nadat ik deze blog heb geschreven. In dat geval zou je direct zijn handleiding kunnen volgen. Maar voor sommige mensen is het handiger om de handleiding in het Nederlands te volgen, dus hier volgt de vertaling en eventuele extra uitleg van mij. En nog belangrijker: ik pas de informatie toe op een Nederlands- en Engelstalige site, terwijl Brad de code heeft geschreven voor een Engels- en Spaanstalige site.
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 te voren te realiseren: je hebt maar één footer. 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, al dan niet met vlaggetjes, krijg je rechts bovenin een taalwisselaar. Dat kan met geschreven tekst, zoals op de site van deze klant, Het kan ook met vlaggetjes, zoals je kunt zien bij deze website van mijn klant.
Let op: je gaat met de taalwisselaar wel altijd naar de homepage van de site in de andere taal.
Business-account
Nog een belangrijk puntje: 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. Als je bent ingelogd op je Squarepace-website ga je naar Setting, Billing, Subscriptions, Website en dan onderaan kun je bij ‘Plan’ klikken op: ‘CHANGE’ en daar upgraden naar een Business-account indien nodig.
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
Maak een nieuwe pagina en noem deze "Home". Of misschien heb je al een homepage. Klik op het wieltje, dan kom je bij de eigenschappen van die pagina. Pas daar de URL aan van "/home" naar "/nl/home". Voeg vervolgens “nl/” toe aan het begin van elke pagina-url bij alle Nederlandstalige pagina's.
Stap 2
Ik ga ervan uit dat de site die je maakt hetzelfde is in beide talen. Ik ga even uit van Nederlands-Engels. Je kunt dan de (in dit voorbeeld) Nederlandse pagina’s gewoon kopiëren. Dat doe je als volgt: klik op het wieltje om bij de pagina-eigenschappen te komen en klik op ‘DUPLICATE PAGE’. Onderaan bij ‘not linked’ zie je dan de gekopieerde pagina met (Copy) erachter. Je moet die pagina op een juiste plek zetten, ik zet ze altijd onder dezelfde pagina in de andere taal, dat is handig als je wijzigingen doorvoert. Je moet de paginatitel en navigatietitel aanpassen (al dan niet vertalen en (Copy) weghalen). Soms is de naam van de pagina hetzelfde, je zegt in meerdere talen "Home", daar moet je zelf gewoon goed op letten. Pas de URL aan van "/nl/home" naar "/en/home". Doe dit met de pagina-url bij alle Engelstalige pagina's. Let op: je ziet nu een enorm menu bovenin staan, namelijk met elke navigatietitel van beide talen. Dat verdwijnt als het helemaal klaar is. Je moet uiteraard wel zelf alle teksten (laten) vertalen en vervangen. Denk ook aan het aanpassen van alle SEO-omschrijvingen van zowel afbeeldingen (die moet je er dan wel opnieuw inzetten) als de pagina’s zelf.
Stap 3
Nu zou je een reeks Nederlandse en Engelse navigatielinks moeten hebben. Vervolgens gaan we code toevoegen: CSS en jQuery.
Open het venster Code Injection (Website/Website Tools (onderaan)/Code Injection). Nu gaan we code toevoegen die zorgt voor het automatisch verwijderen van de links die bepaalde taalvariabelen uit de URL niet bevatten. Door de toegevoegde uitsluiting-optie, zie je dan juist wel de items die je altijd zichtbaar wilt hebben.
Daarnaast sluit dit script automatisch pagina's uit die geen taal-voorvoegsel (/nl of /en in ons voorbeeld) in de URL-slug hebben. Hierdoor kan bijvoorbeeld een "Blog" in beide talen zichtbaar zijn.
Voeg onderstaande code toe in het gedeelte "Footer" als je een Nederlands-Engelstalige site maakt. Maak je een Engels-Spaanstalige site, kun je de code van Brad [link naar site brad] gebruiken. En anders moet je zelf even puzzelen en het script aanpassen. Ik heb trouwens de uitleg binnen de code niet vertaald, het was wel duidelijk zo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
/* SETUP MULTI-LANGUAGE */
var defaultLanguage = 'nl';
var lang = location.pathname.split("/")[1];
if (lang == "" || lang.length > 2 ){
lang = defaultLanguage;
}
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
/* ADD LANGUAGE CLASSES */
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
if (lang == "en") {
$('a[href="/"]').attr("href", "/en/home/");
}
/* ADD EXCLUSION NAV ITEMS */
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');
/* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
$('.multilanguage:not(.lang-' + lang + ', .exclude)').remove();
});
</script>
Stap 4
Op dit punt zouden we alleen nog maar de Engelse menu-items moeten zien, mits je minstens een Business-account hebt bij Squarespace. Anders moet je eerst upgraden. Nu moet je gaan kiezen hoe je wilt dat je bezoekers wisselen van taal, via een voorblad, een taalwisselaar met geschreven tekst (bijvoorbeeld Engels | Nederlands) of met vlaggetjes.
Voorblad
Als je voor een voorblad gaat waar mensen de taal kiezen, ben je nu klaar! Behalve dan dat je nóg een nieuwe “homepage” moet aanmaken met bijvoorbeeld twee buttons die linken naar beide homepages, Nederlands en Engels in ons geval. Deze pagina stel je vervolgens met het wieltje (pagina-eigenschappen) in als homepage (SET AS HOMEPAGE). Deze pagina zet je in de ‘not linked’ sectie van je site.
Taalwisselaar met geschreven tekst
Wil je bovenin een taalwisselaar met geschreven tekst, zoals mijn client van Zest42 wilde, gaan we verder. Iets verderop staat de optie met vlaggetjes. Eerst injecteren we code voor de switcher zelf en daarna kunnen we die stylen met CSS.
Zet deze code onder de andere code:
/*SETUP LANGUAGE SWITCHER MET TEKST*/
$('body').prepend('<div class="language"><a href="/nl/home" class="lang-nl">Nederlands</a> | <a href="/en/home/" class="lang-en">Englisch</a></div>');
</script>
Met CSS laten we het er passend uitzien. Als suggestie kun je de volgende code hier invullen Website/Website Tools/Custom CSS (maar die kun je zelf natuurijk helemaal volgens jouw brand invullen):
/*setup language switcher*/
.language {
color: #fff;
position: absolute;
top: 10px;
right: 10px;
z-index: 99999;
a {
color: #fff;
&:hover {
opacity: 0.8;
}
}
}
Taalwisselaar met vlaggetejs
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 hiervandaan halen.
Plaats dit script helemaal bovenaan je script, boven de code die je al geplaatst hebt (dus in het Footer-gedeelte bij “Code Injection” (Website/Website Tools/Code Injection)) zet je dan deze code:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
En onderstaande code zet je dan bijna helemaal onderaan. Het enige wat er nog onder komt is dit:
});
</script>
/* SETUP LANGUAGE SWITCHER WITH FLAGS */
$('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-us"></span></a></div>');
Alle code onder elkaar
Voor de zekerheid zet ik alle code voor de meestgebruikte optie, een taalwisselaar met vlaggetjes, nog even onder elkaar, dan weet je zeker dat het goed staat.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
/* SETUP MULTI-LANGUAGE */
var defaultLanguage = 'nl';
var lang = location.pathname.split("/")[1];
if (lang == "" || lang.length > 2 ){
lang = defaultLanguage;
}
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
/* ADD LANGUAGE CLASSES */
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
if (lang == "en") {
$('a[href="/"]').attr("href", "/en/home/");
}
/* ADD EXCLUSION NAV ITEMS */
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');
/* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
$('.multilanguage:not(.lang-' + lang + ', .exclude)').remove();
/* SETUP LANGUAGE SWITCHER */
$('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-en"></span></a></div>');
});
</script>
Nu zou het moeten werken! En werkt het niet, check dan de code, voer het opnieuw in, een foutje is snel gemaakt en dat kan iedereen gebeuren. Ik weet dat het - mits je het foutloos hebt ingevoerd - werkt. Dat kun je ook zien in de voorbeelden die ik je gaf. Veel succes!
Brad-Good-methode zonder verspringen, maar met langere laadtijd van de pagina’s
Voor de volledigheid deel ik nog even de code met uitleg voor als je niet wilt dat het menu verspringt, maar als je het geen probleem vind dat de pagina langzaam laadt. Je plaatst deze code niet in het Footer-gedeelte bij “Code Injection” (Website/Website Tools/Code Injection)) maar in het Header-gedeelte. Copy-paste onderstaande code en kijk wat je ervan vindt.
<style>
/* Loading overlay styling */
#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];
if (lang == "" || lang.length > 2) {
lang = defaultLanguage;
}
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
/* ADD LANGUAGE CLASSES */
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
/* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */
if (lang == "en") {
$('a[href="/"]').attr("href", "/en/home/");
}
/* ADD EXCLUSION NAV ITEMS */
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude');
/* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */
$('.multilanguage:not(.lang-' + lang + ', .exclude)').remove();
/* Toon alleen het juiste menu voor de geselecteerde taal */
$('.lang-' + lang).css('display', '');
/* Hide the loading overlay */
$('#loading-overlay').fadeOut(300);
});
</script>
Nu je toch zo precies bezig bent, ga dan gelijk even door deze gratis checklist (kun je hier downloaden, waar je 16 belangrijke punten op je website doorloopt en zo nodig fixt die vaak misgaan bij ondernemers, op het gebied van:
techniek (waar je beter op tijd bij kunt zijn),
gebruiksvriendelijkheid van de site (dingen die irritatie opwekken bij mensen, wat niet bevorderlijk is voor je bedrijf),
het links laten liggen van de mogelijkheid tot het verbeteren van de know, like & trust-factor waardoor mensen klant bij je worden.
Je website is voor veel mensen een eerste indruk van jou of je bedrijf en die kun je maar één keer maken!
Heb jij trouwens nog een andere methode om je site meertalig te maken, hoor ik het heel graag hieronder!