Blokken maken voor de webshop

Inleiding: Wat zijn blokken?

Blokken zijn speciale contentonderdelen die je vooraf maakt en daarna op je webshop kunt plaatsen. Het zijn als het ware kant-en-klare bouwstenen voor je webshop. Er zijn drie soorten: artikel blokken (voor nieuwsberichten of info), assortiment blokken (voor productgroepen zoals aanbiedingen), en carrousel blokken (voor draaiende banners met afbeeldingen).

Waarom blokken gebruiken?

Je wilt blokken gebruiken omdat:

• Je complexe contentonderdelen kunt hergebruiken op verschillende pagina's
• Het je webshop professioneler en dynamischer maakt
• Je productgroepen visueel aantrekkelijk kunt presenteren
• Je belangrijke berichten of acties prominent kunt tonen
• Je makkelijk kunt wisselen wat er op de voorpagina staat
• Het gestructureerd en overzichtelijk werkt
• Klanten een betere winkelervaring krijgen

Let op: Blokken moet je eerst aanmaken voordat je ze op pagina's kunt gebruiken!

Drie soorten blokken

We behandelen alle drie de soorten blokken:

1. Artikel blok: Voor nieuws, updates, of informatie items
2. Assortiment blok: Voor productgroepen (aanbiedingen, nieuwe producten, etc.)
3. Carrousel blok: Voor draaiende banners met afbeeldingen

---

Blok 1: Artikel blok

Een artikel blok is een verzameling van compacte nieuwsberichten of informatieartikelen. Elk artikel kan linken naar een pagina, een popup openen, of doorsturen naar een andere website.

Wanneer gebruiken?

• Nieuwsberichten tonen op de voorpagina
• Tips en tricks delen met klanten
• Acties of evenementen aankondigen
• Seizoensinformatie delen

Stap 1: Artikel blok aanmaken

Naar artikel blokken menu

1. Ga naar "Winkel (Nieuw)"
2. Klik op "Artikel blokken"
3. Je ziet een overzicht van bestaande artikel blokken (kan leeg zijn)

Nieuw artikel blok maken

1. Klik op "Nieuw"
2. Vul de instellingen in:

Naam:

• Geef het blok een herkenbare naam
• Bijvoorbeeld: "Nieuws homepage" of "Tips en tricks"
• Dit is voor intern gebruik

Aantal artikelen:

• Hoeveel artikelen moeten tegelijk zichtbaar zijn op de webshop?
• Bijvoorbeeld: 3 artikelen naast elkaar
• De rest kunnen klanten zien door te scrollen

"Meer" knop:

• Vink aan als klanten meer artikelen kunnen zien via een "Meer" knop
• Laat leeg als alleen deze artikelen zichtbaar zijn

Opslaan

1. Klik op "Opslaan"
2. Het artikel blok is nu aangemaakt

---

Stap 2: Artikelen toevoegen aan het blok

Nu ga je de individuele artikelen maken die in dit blok komen.

Items menu openen

1. Selecteer het artikel blok dat je net hebt gemaakt
2. Klik op "Items"
3. Je ziet nu de opties om artikelen toe te voegen

Je hebt drie soorten artikelen om uit te kiezen:

---

Optie A: Nieuw Pagina (artikel linkt naar een pagina)

Gebruik dit als het artikel naar een aparte pagina moet linken met meer informatie.

Pagina artikel maken

1. Klik op "Meer" → "Nieuw Pagina"

Instellingen invullen:

Titel:

• De kop van het artikel (bijvoorbeeld: "Tulpen nu 20% korting!")

Tekst:

• Een korte beschrijving van het artikel
• Dit is wat klanten zien in het overzicht

Afbeelding in tekst (optioneel):

• Voeg indien nodig een afbeelding toe in de tekst
• Gebruik de code: ![](afbeeldingnaam.png)
• Zie de eerdere handleiding over "Teksten Beïnvloeden"

Zichtbaarheidsdatums (optioneel):

• Van datum: Vanaf wanneer is het artikel zichtbaar?
• Tot datum: Tot wanneer is het artikel zichtbaar?
• Leeg laten: Artikel is altijd zichtbaar

Voorbeeld: Een Valentijnsactie zichtbaar van 1 februari tot 14 februari

Miniatuurafbeelding:

• Upload een kleine plaatje dat bij het artikel hoort
• Dit zien klanten in het overzicht
• Bijvoorbeeld: een foto van tulpen bij het tulpen artikel

Link naar pagina:

• Selecteer naar welke pagina de klant gaat als hij op het artikel klikt
• Dit moet een pagina zijn die je eerder hebt aangemaakt

Positie:

• Bepaal de volgorde (1 = eerst, 2 = tweede, etc.)

Opslaan

1. Klik op "Opslaan"
2. Het pagina-artikel is toegevoegd

---

Optie B: Nieuw Popup (artikel opent een popup)

Gebruik dit als het artikel een popup moet openen met meer informatie, zonder naar een nieuwe pagina te gaan.

Popup artikel maken

1. Klik op "Meer" → "Nieuw Popup"

Instellingen invullen:

Titel, Tekst, Afbeelding, Datums, Miniatuur:

• Vul deze in zoals bij "Nieuw Pagina" hierboven

Popup tekst:

• Dit is de tekst die IN de popup verschijnt
• Kan uitgebreider zijn dan de korte beschrijving
• Bijvoorbeeld: volledige uitleg van de actie met voorwaarden

Ondersteunende afbeeldingen:

• Upload extra afbeeldingen voor in de popup
• Deze verschijnen wanneer de popup opent
• Optioneel

Positie:

• Bepaal de volgorde in het blok

Opslaan

1. Klik op "Opslaan"
2. Het popup-artikel is toegevoegd

Wat gebeurt er? Als klant op het artikel klikt, opent een popup-venster met de extra informatie.

---

Optie C: Nieuw Redirect (artikel stuurt door naar externe website)

Gebruik dit als het artikel naar een andere website moet linken (bijvoorbeeld je Instagram of een leverancier).

Redirect artikel maken

1. Klik op "Meer" → "Nieuw Redirect"

Instellingen invullen:

Titel, Tekst, Afbeelding, Datums, Miniatuur:

• Vul deze in zoals bij de vorige opties

Link:

• Voer de volledige URL in waar de klant naartoe moet
• Bijvoorbeeld: https://www.instagram.com/jouwbedrijf
• Of: https://www.leverancier.nl/actie

Positie:

• Bepaal de volgorde in het blok

Opslaan

1. Klik op "Opslaan"
2. Het redirect-artikel is toegevoegd

Wat gebeurt er? Als klant op het artikel klikt, wordt hij doorgestuurd naar de externe website.

---

Stap 3: Meerdere artikelen toevoegen

Herhaal stap 2 voor elk artikel dat je in het blok wilt hebben. Je kunt verschillende soorten mixen:

• Artikel 1: Pagina (naar meer info)
• Artikel 2: Popup (snelle tip)
• Artikel 3: Redirect (naar Instagram)

Klaar! Je artikel blok is nu gevuld en klaar voor gebruik.

---

Blok 2: Assortiment blok

Een assortiment blok toont een groep producten op je webshop. Perfect voor aanbiedingen, nieuwe producten, of seizoensartikelen.

Wanneer gebruiken?

• Aanbiedingen prominent tonen
• Nieuwe producten uitlichten
• Seizoensproducten promoten
• Bestsellers laten zien

Stap 1: Assortiment blok aanmaken

Naar assortiment blokken menu

1. Ga naar "Winkel (Nieuw)"
2. Klik op "Assortiment blokken"
3. Je ziet een overzicht van bestaande assortiment blokken

Nieuw assortiment blok maken

1. Klik op "+ Nieuw"

Instellingen invullen:

Naam:

• Herkenbare naam voor intern gebruik
• Bijvoorbeeld: "Aanbiedingen homepage" of "Nieuwe rozen"

Titel:

• Deze tekst wordt getoond op de webshop boven het blok
• Bijvoorbeeld: "Speciale aanbiedingen deze week!"
• Dit zien klanten

Sortering:

• Kies hoe producten worden gesorteerd
• Opties: op prijs, op naam, op datum, nieuwste eerst, etc.

Aantal producten op voorpagina:

• Hoeveel producten moeten zichtbaar zijn?
• Bijvoorbeeld: 8 producten
• Rest kunnen klanten zien via "Meer" knop

Verberg meer knop:

• Uitgevinkt: Klanten zien een "Meer" knop om alle producten te zien
• Aangevinkt: Geen "Meer" knop, alleen deze producten zichtbaar

Gebruik besteldagen:

• Aan: Webshop toont alleen producten die op de gekozen besteldag kunnen worden geleverd
• Uit: Webshop toont alle producten, ongeacht of ze gekocht kunnen worden

Lijstgroepen (optioneel):

• Selecteer uit welke lijstgroepen de producten moeten komen
• Bijvoorbeeld: alleen uit "Snijbloemen" of "Aanbiedingen"
• Je kunt meerdere lijstgroepen kiezen
• Leeg laten = uit alle lijstgroepen

Tags (optioneel):

• Selecteer welke tag een product moet hebben om getoond te worden
• Bijvoorbeeld: alleen producten met tag "Nieuw" of "Aanbieding"
• Je kunt meerdere tags kiezen

Opslaan

1. Klik op "Opslaan"
2. Het assortiment blok is aangemaakt

Klaar! Het blok toont nu automatisch producten op basis van je instellingen.

---

Blok 3: Carrousel blok

Een carrousel blok is een draaiende banner met afbeeldingen. Vaak gebruikt op de voorpagina om aandacht te trekken voor acties of seizoenen.

Wanneer gebruiken?

• Grote banner op de voorpagina
• Seizoensfoto's tonen
• Actiebanners die wisselen
• Sfeerbeelden van je producten

Stap 1: Carrousel blok aanmaken

Naar carrousel blokken menu

1. Ga naar "Winkel (Nieuw)"
2. Klik op "Carrousel blokken"
3. Je ziet een overzicht van bestaande carrousel blokken

Nieuw carrousel blok maken

1. Klik op "+ Nieuw"

Instellingen invullen:

Naam:

• Herkenbare naam voor intern gebruik
• Bijvoorbeeld: "Banner homepage" of "Seizoen carrousel"

Automatisch scrollen:

• Aangevinkt: Afbeeldingen wisselen automatisch
• Niet aangevinkt: Klanten moeten zelf klikken om te wisselen

Snelheid:

• Als automatisch scrollen aan staat: hoe snel wisselen de afbeeldingen?
• Bijvoorbeeld: elke 5 seconden
• In milliseconden (5000 = 5 seconden)

Opslaan

1. Klik op "Opslaan"
2. Het carrousel blok is aangemaakt

---

Stap 2: Afbeeldingen toevoegen aan carrousel

Nu ga je de afbeeldingen toevoegen die in de carrousel moeten draaien.

Items menu openen

1. Selecteer het carrousel blok dat je net hebt gemaakt
2. Klik op "Items"

Nieuwe afbeelding toevoegen

1. Klik op "+ Add Image" (of "+ Afbeelding toevoegen")

Instellingen invullen:

Titel:

• Tekst die over de afbeelding wordt getoond
• Bijvoorbeeld: "Tulpen nu 20% korting!"
• Optioneel, kan leeg blijven

Zichtbaarheidsdatums (optioneel):

• Van datum: Vanaf wanneer moet deze afbeelding in de carrousel?
• Tot datum: Tot wanneer moet deze afbeelding zichtbaar zijn?
• Leeg laten: Afbeelding is altijd zichtbaar

Voorbeeld: Kerstbanner alleen zichtbaar in december

Foto uploaden:

1. Klik op "Kies bestand" of het upload icoontje
2. Selecteer je afbeelding
3. Upload

⚠️ BELANGRIJK over afmetingen:

De breedte en hoogte van de carrousel wordt bepaald door de eerste afbeelding die je uploadt!

Tips voor afbeeldingen:

• Gebruik hetzelfde formaat voor alle afbeeldingen
• Bijvoorbeeld: alle afbeeldingen 1200x400 pixels
• Anders worden sommige afbeeldingen uitgerekt of afgesneden
• Knip afbeeldingen bij in een programma zoals Paint.NET (gratis) of Photoshop
• Niet in normale Paint, dat heeft te weinig mogelijkheden

Voorbeeld goede afmetingen:

• Desktop banner: 1200x400 pixels
• Mobiele banner: 800x600 pixels
• Vierkant: 800x800 pixels

Positie:

• Bepaal de volgorde (1 = eerste afbeelding, 2 = tweede, etc.)
• Dit is de volgorde waarin afbeeldingen worden getoond

Opslaan

1. Klik op "Opslaan"
2. De afbeelding is toegevoegd aan de carrousel

---

Stap 3: Meer afbeeldingen toevoegen

Herhaal stap 2 voor elke afbeelding die in de carrousel moet komen.

Voorbeeld carrousel met 3 afbeeldingen:

1. Afbeelding 1: "Lente collectie" (maart-mei)
2. Afbeelding 2: "Moederdag aanbieding" (mei)
3. Afbeelding 3: "Algemene banner" (altijd zichtbaar)

Klaar! Je carrousel blok is gevuld met afbeeldingen.

---

Blokken op pagina's plaatsen

Nu je blokken hebt gemaakt, moet je ze op je webshop pagina's zetten.

Stap 1: Naar pagina's

Pagina openen

1. Ga naar "(Algemeen) Pagina" of "Pagina's"
2. Je ziet een lijst met pagina's

Pagina kiezen of maken

• Klik op een bestaande pagina (bijvoorbeeld je voorpagina)
• Of maak een nieuwe pagina aan met "Nieuw"

Tip: Geef pagina's duidelijke namen zodat je later weet welke pagina wat is.

---

Stap 2: Blok toevoegen aan pagina

Items menu openen

1. Klik op de pagina
2. Ga naar "Items"
3. Je ziet nu wat er al op de pagina staat

Blok toevoegen

1. Klik op "Meer"
2. Selecteer het type blok dat je wilt toevoegen:
   • Artikel blok: Kies welk artikel blok
   • Assortiment blok: Kies welk assortiment blok
   • Carrousel blok: Kies welk carrousel blok
3. Klik op het specifieke blok dat je wilt toevoegen

Opslaan

1. Vergeet niet op "Opslaan" te klikken!
2. Anders verdwijnt je werk
3. Het blok is nu zichtbaar op de pagina

---

Stap 3: Instellen als startpagina (optioneel)

Als je deze pagina als voorpagina van je webshop wilt gebruiken:

Startpagina instellen

1. Ga naar "(Algemeen) Configuraties"
2. Selecteer je webshop configuratie
3. Zoek het veld "Startpagina"
4. Selecteer de pagina die je net hebt gemaakt
5. Klik op "Opslaan"

Resultaat: Deze pagina met je blokken is nu de voorpagina van je webshop.

---

Praktische voorbeelden

Voorbeeld 1: Voorpagina met carrousel en aanbiedingen

• Stap 1: Maak carrousel blok met 3 seizoensfoto's
• Stap 2: Maak assortiment blok "Aanbiedingen" met 8 producten
• Stap 3: Maak artikel blok "Nieuws" met 3 berichten
• Stap 4: Voeg allemaal toe aan voorpagina: eerst carrousel, dan aanbiedingen, dan nieuws
• Resultaat: Professionele homepage met visuele content

Voorbeeld 2: Nieuws sectie met verschillende artikelen

• Artikel 1 (Pagina): "Nieuwe kwekerij" → linkt naar pagina met uitgebreide informatie
• Artikel 2 (Popup): "Tips tulpen verzorging" → opent popup met korte tips
• Artikel 3 (Redirect): "Volg ons op Instagram" → stuurt door naar Instagram
• Resultaat: Diverse nieuwsitems met verschillende acties

Voorbeeld 3: Seizoensgebonden assortiment

• Blok: "Lente bloemen"
• Lijstgroep: Selecteer "Snijbloemen"
• Tag: Selecteer "Lente"
• Zichtbaarheid: Alleen maart-mei
• Resultaat: Automatisch de juiste producten in het juiste seizoen

Voorbeeld 4: Afmetingen carrousel fout

• Probleem: Eerste afbeelding is 1200x400, tweede is 800x600
• Resultaat: Tweede afbeelding wordt uitgerekt en ziet er lelijk uit
• Oplossing: Knip tweede afbeelding bij naar 1200x400 in Paint.NET
• Resultaat: Beide afbeeldingen zien er goed uit

---

Belangrijke tips

Tip 1: Plan je blokken vooraf

• Bedenk eerst welke blokken je nodig hebt
• Maak een lijst: "Carrousel voorpagina", "Aanbiedingen", "Nieuws"
• Maak ze allemaal aan voordat je ze op pagina's plaatst

Tip 2: Consistente afmetingen carrousel

• Meet de afmetingen van je eerste carrousel afbeelding
• Knip alle andere afbeeldingen naar exact dezelfde afmetingen
• Dit voorkomt uitgerekte of afgesneden foto's

Tip 3: Gebruik duidelijke namen

• "Homepage carrousel 2025" is beter dan "Carrousel1"
• Later weet je nog wat het was
• Vooral handig als je veel blokken hebt

Tip 4: Test assortiment blokken

• Check of de juiste producten worden getoond
• Pas filters aan als het niet klopt
• Test met verschillende lijstgroepen en tags

Tip 5: Gebruik datums voor seizoensgebonden content

• Stel in/uit datums in voor seizoensartikelen
• Kerstbanner automatisch weg na kerst
• Scheelt handmatig werk

Tip 6: Vergeet niet op te slaan

• Klik altijd op "Opslaan" na wijzigingen
• Anders is je werk weg
• Dubbelcheck voordat je het scherm sluit

Veelvoorkomende vragen

Vraag: Hoeveel blokken kan ik maken?

• Onbeperkt
• Maak zoveel als je nodig hebt
• Maar houd het overzichtelijk

Vraag: Kan ik hetzelfde blok op meerdere pagina's gebruiken?

• Ja, absoluut!
• Dat is juist het voordeel van blokken
• Maak één keer, gebruik overal

Vraag: Kan ik een blok later aanpassen?

• Ja, altijd
• Wijzigingen zijn meteen zichtbaar op alle pagina's waar het blok staat
• Dit is handig voor updates

Vraag: Waarom zie ik geen producten in mijn assortiment blok?

• Check of je lijstgroepen of tags hebt ingesteld
• Mogelijk zijn er geen producten die aan de criteria voldoen
• Pas filters aan of laat ze leeg

Vraag: Mijn carrousel afbeeldingen zijn uitgerekt, wat nu?

• Alle afbeeldingen moeten dezelfde afmetingen hebben
• Knip ze bij in Paint.NET of een ander programma
• Gebruik exact dezelfde pixels (breedte x hoogte)

Vraag: Hoe verwijder ik een blok van een pagina?

• Ga naar de pagina → Items
• Selecteer het blok
• Klik op verwijderen
• Het blok zelf blijft bestaan, alleen de link naar de pagina is weg

Wat te doen bij problemen?

Probleem: Blok niet zichtbaar op webshop

• Check of je het blok hebt toegevoegd aan de pagina
• Check of je op "Opslaan" hebt geklikt
• Ververs de webshop cache
• Check of de pagina wel als startpagina is ingesteld

Probleem: Carrousel afbeeldingen zien er raar uit

• Controleer of alle afbeeldingen dezelfde afmetingen hebben
• Knip ze bij naar exact dezelfde pixels
• Upload ze opnieuw

Probleem: Assortiment blok is leeg

• Check je filters (lijstgroepen, tags)
• Mogelijk zijn er geen producten die voldoen
• Verwijder filters om meer producten te tonen
• Check of "Gebruik besteldagen" problemen geeft

Probleem: Artikel niet zichtbaar in artikel blok

• Check de zichtbaarheidsdatums
• Mogelijk is de datum al verlopen
• Pas datums aan of laat leeg voor altijd zichtbaar

Probleem: Kan blok niet vinden om toe te voegen aan pagina

• Check of je het blok hebt opgeslagen na aanmaken
• Ververs de pagina
• Mogelijk zit het in een andere categorie (artikel/assortiment/carrousel)

Samenvatting

Blokken maken voor je webshop doe je door eerst de blokken aan te maken en ze daarna op pagina's te plaatsen:

Drie soorten blokken:

1. Artikel blok (nieuwsberichten/info):

   • Maak blok: Artikel blokken → Nieuw → naam, aantal artikelen, "Meer" knop → Opslaan
   • Voeg items toe: Selecteer blok → Items → kies type: Nieuw Pagina (linkt naar pagina), Nieuw Popup (opent popup), of Nieuw Redirect (stuurt naar website)
   • Vul per item in: titel, tekst, miniatuurafbeelding, datums (optioneel), link/popup/redirect, positie → Opslaan

2. Assortiment blok (productgroepen):

   • Maak blok: Assortiment blokken → Nieuw → naam, titel (zichtbaar op shop), sortering, aantal producten, "Meer" knop, besteldagen (aan/uit)
   • Filters: lijstgroepen (optioneel) en tags (optioneel) bepalen welke producten worden getoond
   • Opslaan → producten verschijnen automatisch op basis van filters

3. Carrousel blok (draaiende banner):

   • Maak blok: Carrousel blokken → Nieuw → naam, automatisch scrollen (aan/uit), snelheid → Opslaan
   • Voeg afbeeldingen toe: Selecteer blok → Items → + Add Image → titel (optioneel), datums (optioneel), upload foto
   • Belangrijk: Gebruik voor ALLE afbeeldingen exact dezelfde afmetingen (pixels) om uitrekken te voorkomen, knip bij in Paint.NET
   • Herhaal voor elke afbeelding

Blokken op pagina's plaatsen:

• Ga naar Pagina's → selecteer pagina → Items → Meer → kies blok type → selecteer specifiek blok → Opslaan
• Optioneel: Stel pagina in als startpagina via Configuraties → Startpagina

Let op: Vergeet nooit op "Opslaan" te klikken, anders is je werk weg!