Toon afbeeldingen op je site en voeg animaties, onderschriften en links toe.

Gebruik afbeeldingsblokken om afbeeldingen toe te voegen aan pagina's of blogposts. Elk afbeeldingblok toont één afbeelding.

Een afbeelding toevoegen

Om een afbeeldingblok toe te voegen:

1. Bewerk een pagina of post, klik op blok toevoegen of een invoegpunt en klik vervolgens op afbeelding. Zie Content toevoegen met blokken voor hulp.
2. Klik op het + pictogram op het afbeeldingblok.
3. Upload een bestand vanaf je computer of mobiel apparaat, hergebruik een afbeelding uit je bibliotheek, of blader door stock-afbeeldingen. Voor het beste resultaat gebruik je een afbeelding van minder dan 500 KB.
4. Gebruik de afbeeldingsblokeditor om de afbeelding te vervangen, te verwijderen of te bewerken.
5. Als je Fluid Engine gebruikt, zorg er dan voor dat je de mobiele lay-out instelt.

Tip: Het afbeeldingblok wordt niet weergegeven op je live site zonder een geüploade afbeelding.

Afbeeldingen uploaden vanaf een mobiel apparaat

Je kunt afbeeldingen toevoegen vanaf je telefoon of een ander mobiel apparaat met de Squarespace-app. Een afbeelding uploaden:

1. Klik in de afbeeldingblok-editor op + en kies dan Uploaden vanaf mobiel. Dit stuurt een pushmelding naar uw apparaat.
   • Als je voor het eerst iets uploadt op deze site, verschijnt er een QR-code op je computer. Als je de Squarespace app nog niet hebt, scan dan de code om deze te downloaden en klik op doorgaan en vervolgens op push versturen.
2. Tik op de melding op je apparaat om de importtool van de Squarespace-app te openen. De app haalt automatisch afbeeldingen uit de fotobibliotheek van je apparaat.
   • Als de melding niet verschijnt, controleer dan de instellingen van je apparaat om er zeker van te zijn dat pushmeldingen van de Squarespace-app zijn ingeschakeld.
3. Tik op de afbeelding die je wilt gebruiken en tik vervolgens op Uploaden.
4. De afbeelding verschijnt in het afbeeldingblok op je computer. Tik in de Squarespace app op Vervang om een andere afbeelding te kiezen, of tik op Gereed om de uploader te sluiten.

Tip: Als je afbeeldingen uploadt vanaf je mobiel, klik dan op Problemen oplossen in het pop-up dat op je computer verschijnt om de QR-code waarmee je de Squarespace-app downloadt opnieuw te scannen of de optie te vinden om de pushmelding opnieuw te versturen.

Open de afbeeldingblok-editor

In de afbeeldingblok-editor kun je:

• De afbeelding vervangen, verwijderen of bewerken
• Stel het focuspuntin
• Stel je ontwerpopties in
• Alt-tekst toevoegen
• De alternatieve bestandsnaam bewerken
• Een lichtbak in- of uitschakelen
• Voeg je afbeeldingseffecten toe

Om de editor voor afbeeldingblokken te openen:

1. Bewerk je pagina of post.
2. Klik op het afbeeldingblok.
3. Klik op het potloodpictogram in de werkbalk van het blok.

Alternatieve bestandsnaam

Wanneer je afbeeldingsbestandsnamen bewerkt in de assetbibliotheek, wordt de bestandsnaam overal bijgewerkt waar de afbeelding op je site verschijnt. Voor afbeeldingblokken kun je een alternatieve bestandsnaam toevoegen als je wilt dat de afbeelding een andere bestandsnaam heeft voor SEO-doeleinden.

Houd er rekening mee dat wanneer je de bestandsnaam in de assetbibliotheek wijzigt, de nieuwe bestandsnaam aan de afbeeldingsblokken wordt toegevoegd. Je moet de alternatieve bestandsnaam dus opnieuw bijwerken.

Een afbeeldingslink toevoegen

Om van de afbeelding een hyperlink te maken, klik je op het blok om het te markeren en klik je op het hyperlinkpictogram op de blokwerkbalk, of klik je op Hyperlink bijvoegen in de blokeditor. Voor de meeste klassieke editorlay-outs moet je On Image of On knop selecteren voordat Hyperlink bijvoegen verschijnt. Klik buiten de blokeditor om de wijzigingen op te slaan als je klaar bent.

Houd er rekening mee dat het inschakelen van een lichtbak doorklik-URL uitschakelt.

klassieke editor-lay-outs

Afbeeldingblokken die aan Fluid Engine-gedeelten worden toegevoegd, hebben geen ingebouwde lay-outopties. Maak vergelijkbare lay-outs door afbeeldingblokken te overlappen met andere blokken, zoals tekstblokken en knoppenblokken.

Als je een afbeeldingblok toevoegt in de klassieke editor, wordt standaard de in-line lay-out gebruikt. Om de lay-out te wijzigen, klik je op het tabblad ontwerp en kies je de gewenste lay-out uit de volgende opties:

• In-line - Het basisafbeeldingblok, met optionele onderschriften onder of boven de afbeelding. Stel in hoe het onderschrift wordt weergegeven in het tabblad Inhoud.
• Poster - Geef tekst weer over afbeeldingen en creëer zo het uiterlijk van een banner of poster.
• Kaart - Geef afbeeldingen weer met tekst aan de linker- of rechterkant. De tekst beweegt meestal onder de afbeeldingen in kleinere browsers en mobiele apparaten, of wanneer afbeeldingblokken in kolommen worden gebruikt.
• Overlap - Afbeeldingen aan de ene kant weergeven met tekst aan de andere kant, waardoor de afbeelding gedeeltelijk overlapt. Voeg een achtergrondkleur toe aan de titel voor een accentueringseffect. De tekst beweegt meestal naar de onderkant van de afbeeldingen in kleinere browsers en mobiele apparaten, of wanneer afbeeldingsblokken in kolommen worden gebruikt.
• Collage - Toon afbeeldingen aan de ene kant en tekst over achtergrondkaarten aan de andere, waarbij de afbeelding wordt verschoven en overlapt. De tekst beweegt meestal naar de onderste hoek van de afbeeldingen in kleinere browsers en op mobiele apparaten, of wanneer afbeeldingsblokken in kolommen worden gebruikt.
• Stapel – Toon afbeeldingen met tekst eronder.

Wanneer je een lay-out selecteert, zie je een voorbeeld ervan op de pagina. Om te zien hoe je afbeeldingblok op mobiele apparaten wordt weergegeven, gebruik je Apparaatweergave.

Snel de lay-out en tekstuitlijning aanpassen

In de klassieke editor kun je met snelle actieknoppen de lay-out en tekstuitlijning van een afbeeldingblok wijzigen zonder de editor te openen. Klik op het afbeeldingblok tijdens het bewerken van de pagina en klik vervolgens op de knoppen voor lay-out of uitlijning die tussen het potlood en de prullenbak verschijnen.

Stel het Masker van de afbeelding in

Naast bijsnijden en verkleinen kun je afbeeldingblokken maskeren om variatie en een uniek visueel effect aan je afbeeldingen toe te voegen. Stel het Masker van de afbeelding in via het tabblad Ontwerp van de afbeeldingblokeditor:

• Hoekradius – Voor een subtiel effect, rond de hoeken van een afbeelding.
• Masker - Voor een drastischere verandering, stel je een masker in, zoals een cirkel of driehoek. Het masker verschijnt boven je afbeelding.

Tip: Als je site Fluid Engine ondersteunt, kun je Maskerblokken gebruiken om effen kleurvormen aan je pagina's toe te voegen zonder afbeeldingen.

Hoekradius

Gebruik in het tabblad Ontwerp de opties Hoekradius om de straal voor de hele afbeelding of voor afzonderlijke hoeken in te stellen.

Houd er rekening mee:

• Om je hoekradius te verwijderen, maak je wijzigingen ongedaan tijdens het bewerken, of voer 0 in in de velden voor de hoekradius.
• Als de opties voor hoekradius niet worden weergegeven op het tabblad Ontwerp, controleer dan of Masker niet is geselecteerd.

Masker

Klik in het tabblad Ontwerp op Masker, kies een beeldverhouding (1:1, 2:3 of 3:2), en kies vervolgens het masker. Om het masker te verwijderen, selecteer je een andere optie in het tabblad Ontwerp (Fit / Fill of Origineel).

Houd er rekening mee:

• Gebruik het focuspunt om aan te passen hoe je afbeelding in het masker wordt weergegeven
• Als je afbeeldingen zo instelt dat ze worden geopend in een lichtbak, verschijnt het oorspronkelijke Masker van je afbeelding nadat bezoekers op de afbeelding hebben geklikt.
• Als je de circle Masker kiest maar je afbeelding er ovaal uitziet, gebruik dan onze ingebouwde afbeeldingseditor om je afbeelding bij te snijden tot een beeldverhouding van 1:1.

Wijzig de grootte van de afbeelding

Je kunt afbeeldingblokken op verschillende manieren verkleinen of bijsnijden. De primaire manier om een afbeelding te verkleinen is:

• Fluid Engine - Klik en sleep vanaf de hoeken of zijkanten, en gebruik de optie vullen in het ontwerptabblad om bij te snijden en te maskeren
• Klassieke editor - Formaat wijzigen met blokken

Voor alle afbeeldingblokken kun je ook de afbeeldingseditor gebruiken om de originele afbeelding bij te snijden. Houd er rekening mee dat deze wijziging permanent is.

Pas de grootte aan in de klassieke editor

In de klassieke editor kun je het afbeeldingblok verkleinen door blokken aan beide zijden toe te voegen. De meest gebruikelijke manier om dit te doen is met afstandsblokken, die lege ruimte creëren.

Pas als volgt de grootte aan door middel van blokken:

1. Klik op een invoegpunt om een afstandsblok toe te voegen.
2. Sleep je afstandsblok naar links of rechts van je afbeeldingblok.
3. Klik en sleep de vergrotingsgreep.

Houd er rekening mee:

• Om het beeld te centreren, voeg je aan beide zijden afstandsblokken van gelijke grootte toe.
• Voor in-line en posterlay-outs in de klassieke editor, klik en sleep je de bijsnijdgreep om de afbeelding verticaal bij te snijden. Hierdoor blijft de breedte van de afbeelding hetzelfde terwijl de hoogte verandert.
• De lay-outs kaart, overlap en collage hebben een optie om de grootte aan te passen in de klassieke editorinstellingen:

Houd er rekening mee dat deze wijzigingen alle afbeeldingblokken met die lay-out beïnvloeden.

Tip: Je kunt de automatisch toegepaste opvulling op afbeeldingblokken verwijderen door aangepaste code toe te voegen. Voor meer informatie, bezoek deze post in het Squarespace Forum. Houd er rekening mee dat aangepaste codewijzigingen buiten het bereik van onze ondersteuning vallen. Dit betekent dat we je niet kunnen helpen bij het opzetten of oplossen van problemen met op code gebaseerde oplossingen.

Vul het blok

Je kunt afbeeldingen zo instellen dat ze het volledige gebied van het blok vullen in Fluid Engine en via de in-line lay-out van de klassieke editor. De andere klassieke lay-outs vullen het blokgebied automatisch.

• Fluid Engine - Gebruik de optie Vullen op het tabblad Ontwerpen om de afbeelding de container te laten vullen. Als je kiest voor Fit, wordt er een opvulling rondom de afbeelding aangebracht.
• Klassieke editor - Zet de Stretch-schakelaar aan in het Tabblad Ontwerp.
• Als de afbeelding breder is dan het gebied van het afbeeldingblok, wordt deze verkleind om te passen (niet bijgesneden).

Houd er rekening mee:

• Het uitrekken van een afbeelding kan jouw beeldkwaliteit beïnvloeden.
• Om de noodzaak van uitrekken te verminderen, raden we aan een afbeelding te uploaden met een breedte tussen 1500 en 2500 pixels.

Animaties en afbeeldingseffecten toevoegen

Je kunt subtiele animaties aan je afbeeldingen toevoegen om je site visueel aantrekkelijker te maken:

• Fluid Engine - Schakel sitebrede animaties in via sitestijlen of voeg beeldeffectentoe.
• Klassieke editor - Schakel blokanimaties in via het tabblad Ontwerp van elk afbeeldingblok dat je wilt animeren.

Voeg tekst toe

Afbeeldingsblokken in de klassieke editor hebben ingebouwde onderschriftopties, terwijl Fluid Engine meer veelzijdigheid biedt.

Tip: We raden je ook aan om alt-tekst toe te voegen aan elke afbeelding om de toegankelijkheid en SEO te verbeteren. Ga naar Audio, afbeeldingen en video's toegankelijker maken voor meer informatie over hoe je je afbeeldingen toegankelijker kunt maken. 

Fluid Engine

In Fluid Engine-gedeelten gebruik je een tekstblok om tekst toe te voegen naast of over een afbeeldingblok.

Klassieke editor

Klik in gedeelten van de klassieke editor op tekstvelden om tekst aan de afbeelding toe te voegen. Je ziet misschien plaatshoudertekst zoals Voeg een afbeeldingsbeschrijving toe of Maak het waar om op te vallen.

Houd er rekening mee:

• Beperk titels tot een paar woorden. Gebruik voor ondertitels en onderschriften één of twee zinnen. Dit zorgt voor een evenwicht tussen woord en beeld. Ook blijft je tekst zichtbaar op mobiele apparaten.
• Druk op Shift + Enter om regeleinden toe te voegen aan titeltekst.
• Markeer de tekst en gebruik de werkbalk om de opmaak te wijzigen, zoals vetgedrukt, cursief of het toevoegen van een hyperlink.
• Met uitzondering van in-line- en stapellay-outs behoudt tekst zijn ingestelde relatieve breedte ten opzichte van de afbeelding op mobiele apparaten en smalle browsers.
• Als je voor het eerst wisselt tussen in-line en een andere lay-out, moet je elke afbeeldingstekst opnieuw invoeren.

De in-line lay-out ondersteunt één basisonderschrift, terwijl de andere lay-outs velden voor een titel en een ondertitel ondersteunen.

Lettertypen en kleuren

Fluid Engine

In de Fluid Engine-gedeelten kun je een overlaykleur toevoegen aan een afbeeldingblok door de overlayschakelaar aan te zetten in het tabblad ontwerp. Overlays passen een gekleurd filter toe op afbeeldingen, waardoor ze een lichte tint krijgen. 

Gebruik de kleurkiezer om een kleur en transparantie voor de overlay te selecteren. Klik op Blend mode om een extra visueel effect toe te voegen aan de overlay. Deze visuele effecten worden weergegeven met kleine visuele verschillen, afhankelijk van de browser van de kijker.

Klassieke editor

Hoe je de lettertypen en kleuren van het afbeeldingblok in de klassieke editor opmaakt, hangt af van de versie van je site.

Het in-line afbeeldingsblok heeft geen eigen ontwerpaanpassingen in sitestijlen. Zie Onderschriften bij afbeeldingen stijlen voor meer informatie over lettertypen, kleuren en de grootte van onderschriften.

Volgende stappen

Nadat je het Afbeeldingblok hebt ingesteld, kun je het volgende doen:

• Versleep het blok om het te verplaatsen of kolommen en rijen te maken.
• Gebruik de afbeeldingseditor om afbeeldingen bij te snijden, te roteren of filters toe te voegen.
• Verwijder het blok.

Om eventuele afbeeldingsproblemen op te lossen, bezoek Afbeeldingen opmaken voor weergave op het web