Verbeter de stijl en het uiterlijk van je site met geavanceerde codeervaardigheden.

Je kunt op Squarespace een website bouwen zonder programmeer- of ontwerpkennis. Wanneer je een blok toevoegt, voeg je HTML toe aan je site zonder de code zelf te schrijven. Op dezelfde manier verander je de CSS van je site wanneer je stijlwijzigingen aanbrengt. Het Squarespace platform is krachtig en flexibel en je kunt de meeste ontwerpuitdagingen oplossen met ingebouwde stijlopties.

Om je site verder aan te passen, kun je aangepaste code gebruiken. We raden je ten zeerste aan om kennis te hebben van codering voordat je aangepaste code toevoegt. Sommige wijzigingen in de codering zullen in strijd zijn met de onderliggende code van je site, en het kan moeilijk zijn om deze wijzigingen te stylen.

Het toevoegen van code aan je site is een geavanceerde aanpassing die buiten de ondersteuning van Squarespace valt. Als je kennis hebt van coderen en meer hulp nodig hebt, ga dan naar het Squarespace Forum. Je kunt je ook aansluiten bij Squarespace Circle, een community van creatieve professionals die mogelijk meer technische vragen kunnen beantwoorden. Als je geen programmeerkennis hebt maar wel aangepaste code aan je site wilt toevoegen, overweeg dan een Squarespace-expert in te huren.

Bekijk een video

Manieren om aangepaste code toe te voegen

Squarespace biedt ondersteuning voor het toevoegen van client-side code aan je site. De opties hangen af van je plan. Alle opties zijn beschikbaar tijdens een proefperiode:

Squarespace biedt geen ondersteuning voor server-side code, waaronder PHP, Ruby, Ruby on Rails en SQL.

Codeblokken versus insluitingsblokken

Het insluitingsblok haalt inhoud op van externe sites en diensten die de oEmbed-standaard gebruiken. Je kunt het insluitingsblok gebruiken om basisinhoud van derden op je site weer te geven, zoals een Facebook-post of een video van een host die niet door Squarespace wordt ondersteund.

Als je meer geavanceerde en aanpasbare code hebt, is het codeblok de beste keuze. Het is veelzijdig en kan code renderen in HTML en Markdown. Je kunt het ook gebruiken om codefragmenten weer te geven. Het is gebruikelijk om codeblokken te gebruiken voor op code gebaseerde aanpassingen, zoals:

• Documenten inbedden via een dienst zoals Issuu
• Een MLS-zoekopdrachttoevoegen

HTML, JavaScript en CSS

Lees meer over deze veelvoorkomende soorten aangepaste code die je aan je site kunt toevoegen. 

HTML

De code die wordt gebruikt om content aan een webpagina toe te voegen. Wanneer je een blok toevoegt, voeg je HTML toe aan je site. 

JavaScript

De code die wordt gebruikt om interactiviteit aan een webpagina toe te voegen. JavaScript werkt achter de schermen om zaken zoals diavoorstellingen, schuifregelaars en lightboxes te laten werken.

CSS

CSS is de programmeertaal die wordt gebruikt om stijl en ontwerp toe te passen op een webpagina die in HTML is geschreven. Alle Squarespace-sjablonen hebben ingebouwde CSS en alle sjablonen hebben tweaks en stijlopties. Als je de sitestijlen wijzigt, verander je de CSS van je site. Als je besluit om aangepaste CSS op je site toe te passen, gebruik het dan spaarzaam.

Je kunt de CSS-editor gebruiken om het volgende aan te passen:

• Lettertypes
• Kleuren
• Achtergronden

Je moet geen CSS gebruiken om aan te passen:

• Randen
• Marges
• Drijvers
• Afmetingen (blokken, afbeeldingen of banners)
• Positionering

Aangepaste CSS heeft een limiet van 128.000 tekens.

Zie onze ontwikkelaarsdocumentatie voor meer informatie over de HTML-attributen voor blokken.

Het Squarespace Developer Platform (alleen versie 7.0)

Als je een gevorderde gebruiker bent van versie 7.0, kun je het Squarespace Developer Platform gebruiken om toegang te krijgen tot de onderliggende code van de sjabloon van je site. Dit platform is ontworpen voor ontwikkelaars en ontwerpbureaus om onze bestaande sjablonen aan te passen en zelfs om sjablonen helemaal opnieuw op te bouwen.

Als je geen aangepaste code kunt invoegen

Als je problemen hebt met het inplakken van je code, probeer dan de sneltoets. Klik op het gebied dat je wilt plakken en druk dan:

Als je aangepaste code niet verschijnt

Als je aangepaste code niet verschijnt, vernieuw je browser. Als dat niet helpt, kan dat komen doordat:

• Je bent ingelogd - Als beveiligingsmaatregel kan code in een codeblok niet verschijnen wanneer je bent ingelogd, zelfs als bezoekers deze kunnen zien. Dit gebeurt wanneer je probeert embedded JavaScript te bekijken via een beveiligde verbinding (https://). Ga naar je site in een incognitobrowser om dit te testen.
• De code staat op een indexpagina – Je code wordt mogelijk niet weergegeven als je deze aan een pagina binnen een index hebt toegevoegd. Om dit te testen, verwijder je de pagina uit de index in het paneel Pagina's, en bezoek je vervolgens je site in een incognitobrowser.
• Je hebt Ajax-laden ingeschakeld – Af en toe kan Ajax conflicteren met ingebedde aangepaste code, codegebaseerde aanpassingen, anchor-links en URL-omleidingen. Om het probleem op te lossen, probeer Ajax-laden uit te schakelen.

Als de code nog steeds niet werkt, neem dan contact op met de bron van de code, want zij kennen de code en hoe deze zou moeten werken het beste. Code van derden valt buiten de ondersteuning van Squarespace, dus we kunnen je niet helpen met extra probleemoplossing.

Als je een CORS-foutmelding ontvangt

Je krijgt een CORS-fout (Cross Origin Resource Sharing) als je JavaScript gebruikt om aanvragen te doen vanuit een browser. Alle verzoeken moeten afkomstig zijn van een serverapplicatie. Wij bieden geen ondersteuning voor CORS-aanvragen.

Hulpbronnen voor programmeren

Hier volgen enkele populaire en betrouwbare websites die we aanbevelen voor tutorials, probleemoplossing en naslaggidsen:

• W3Schools
• Codecademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Boomhut

Opmerking: Aangepaste code valt buiten het bereik van onze ondersteuning. Dit betekent dat we je niet verder kunnen helpen met de installatie of probleemoplossing. Daarnaast kunnen we bij een op code gebaseerde oplossing de functionaliteit of volledige compatibiliteit met Squarespace niet garanderen. Dit omvat onder meer hoe het functioneert binnen ons responsive design, met name de weergave op mobiele apparaten, en of het werkt op alle sjablonen. CSS-aanpassingen kunnen ook weergaveproblemen veroorzaken bij toekomstige updates van ons platform. Hoewel we je niet verder kunnen helpen, zijn er veel bronnen die je in de juiste richting kunnen wijzen:

• Leer de beste werkwijzen voor het toevoegen van aangepaste code.
• Lees onze algemene handleiding over op code gebaseerde aanpassingen.
• Bezoek het Squarespace-forum, ons forum voor klanten en ontwikkelaars.
• Huur een Squarespace-expert in om aangepaste code voor je site te bouwen.
• Ontdek onze premium en enterprise-plannen om een meer aangepaste oplossing voor je bedrijf te ontwikkelen.