Site-design en branding #

Onder Instellingen → Design stelt u de uitstraling van uw webshop in: logo, bedrijfsfoto, achtergrond, kleuren, lettertypes, menu en knoppen. Alles wat u hier kiest, geldt voor de hele site. Sinds 24 september 2026 bepaalt u hier ook de kleuren van de e-mails aan uw klanten, en vindt u op het tabblad Op je website de code om een inlogvak of uw albumoverzicht op uw eigen website te zetten.

Voorwaarden #

Dit scherm hoort bij het bedrijfs-account. Medewerkers en fotografen zien het menu-item Design niet.

Bovenaan het scherm staat naast de titel Design de tekst Huidig Design. Zolang het scherm nog laadt, staat daar heel even Nieuw Design; dat betekent niets. Tijdens dat laden zijn de velden nog grijs.

Eén keer opslaan voor alle tabbladen #

Rechtsboven staat één knop Opslaan. Die knop bewaart alle tabbladen tegelijk — u hoeft dus niet per tabblad op te slaan, en u mag rustig eerst alles langslopen voordat u opslaat.

• Opslaan is grijs zolang er niets veranderd is, en ook terwijl het scherm nog laadt of aan het opslaan is. Onder het formulier staat steeds hoe het ervoor staat: Geen wijzigingen, Niet-opgeslagen wijzigingen of Design opslaan…. Tijdens het opslaan staat er Opslaan… op de knop.
• Vergeet u op te slaan, dan vraagt het scherm bij het weggaan: “Je hebt niet-opgeslagen wijzigingen. Weet je zeker dat je deze pagina wilt verlaten?” Wisselen tussen de tabbladen van Design kan gewoon, zonder die vraag.
• Beide rondingsvelden moeten gevuld zijn: Ronding randen kopstukken (tabblad Menu) en Vul de ronding van de knoppen in (tabblad Knoppen). Is een van de twee leeg, dan wordt er niets opgeslagen. U leest dan onder het formulier “Vul bij Knoppen de ronding van de knoppen in voordat je het design opslaat.” of “Vul bij Menu de ronding van de kopstukken in voordat je het design opslaat.”, en het scherm springt naar het tabblad waar het lege veld staat.

Bij een geslaagde opslag verschijnt “Uw design is aangepast. Laad uw webshop opnieuw om het te zien; dat kan tot 10 seconden duren.” Gaat er iets mis, dan verschijnt “Er is iets fout gegaan”, met onder het formulier in rood “Opslaan is niet gelukt. Je wijzigingen staan er nog; probeer opnieuw.”

De zes tabbladen #

Sinds 24 september 2026 staan de tabbladen in deze volgorde: Algemeen, Kleuren, Menu, Teksten, Knoppen en Op je website. Op het laatste tabblad wordt niets bewaard; zie verderop. Alle kleuren van de webshop staan nu samen onder Kleuren; de vroegere tabbladen Categorieën, Producten en Fotos zijn daarin opgegaan, en de kleurkiezers die eerder op Algemeen, Menus, Teksten en Knoppen stonden ook.

Algemeen #

• Domein naam — grijs. Dit is het adres waarop uw webshop draait; wijzigen kan hier niet.
• Site naam — met de toelichting Deze naam wordt getoond in de tab van de browser en gebruikt voor de SEO.
• Logo — kies een bestand van uw computer. Het logo staat in de kopbalk van de webshop. Heeft een school een eigen logo, of de fotograaf die aan die school hangt, dan ziet de klant van die school dat logo in plaats van het uwe.
• Bedrijfsfoto — met de toelichting Deze foto wordt op de eerst geladen pagina weergegeven. Afhankelijk van uw type website is dit de hoofdpagina of loginpagina.
• Achtergrond afbeelding — met de toelichting Deze afbeelding wordt de achtergrond van de webshop.

De achtergrondkleur van de pagina staat niet meer hier, maar onder Kleuren → Algemeen → Achtergrond pagina.

Een afbeelding weghalen #

Onder Logo, Bedrijfsfoto en Achtergrond afbeelding verschijnt de knop Logo verwijderen / Bedrijfsfoto verwijderen / Achtergrond verwijderen zodra er een afbeelding staat. Staat er niets, dan is de knop er ook niet.

De knop haalt de afbeelding meteen uit beeld en uit de voorbeeldweergave, maar de wijziging is pas definitief als u daarna op Opslaan drukt. Bedenkt u zich, dan verlaat u het scherm zonder op te slaan en staat de oude afbeelding er de volgende keer nog gewoon.

Wilt u een afbeelding niet weghalen maar vervangen, kies dan gewoon een nieuw bestand; verwijderen hoeft daarvoor niet.

Controleer na het opslaan zonder Logo of Bedrijfsfoto even uw webshop: op de plek waar de afbeelding stond, in de kopbalk of naast het inlogvak, kan dan een leeg afbeeldingsvakje achterblijven. Een vervangende afbeelding voorkomt dat.

Wat er met uw afbeelding gebeurt #

Gebruik een JPG-, PNG-, GIF- of WebP-bestand. Het scherm laat u ook andere bestanden kiezen, zoals een SVG of PDF, maar dan mislukt het opslaan met Er is iets fout gegaan.

De drie afbeeldingen worden bij het opslaan naar de server gestuurd en daar op een vaste maat gebracht. De verhouding blijft daarbij altijd behouden — er wordt niets bijgesneden. Een grotere afbeelding wordt verkleind, maar een kleinere wordt ook vergroot tot die maat; lever daarom liever een scherpe, ruime afbeelding aan dan een klein bestandje:

| Afbeelding | Past daarna precies binnen |

|—|—|

| Logo | 1200 × 1200 pixels |

| Bedrijfsfoto | 1600 × 1600 pixels |

| Achtergrond afbeelding | 2560 × 2560 pixels |

De achtergrondafbeelding wordt op de webshop passend uitgesneden over de volle breedte weergegeven, gecentreerd, zonder te herhalen, en hij blijft staan als de bezoeker scrolt. Kies dus liever een rustige, breed uitgesneden foto dan een staand portret. Op de fotopagina van een album kan een eigen albumachtergrond hier nog overheen komen.

De achtergrondkleur (onder Kleuren) blijft ook met een achtergrondafbeelding van belang: die is te zien zolang de afbeelding nog laadt.

Kleuren #

Op dit tabblad staan links alle kleuren, in groepen, en rechts een voorbeeld. Bovenaan staat de knop Ongedaan maken, die uw laatste kleurwijzigingen één voor één terugdraait; hij is grijs zolang er niets terug te draaien valt. Wijzigingen staan pas online als u op Opslaan klikt.

Snel beginnen. Bovenaan de kleuren staat het uitklapblok Snel beginnen — Kies je merkkleur, dan stellen we alle kleuren leesbaar voor je in. Klik erop en kies:

• Hoofdkleur — voor de menubalk, de voettekst en de productnaam;
• Accentkleur — voor knoppen en aanwijzen. Zolang u die niet kiest, staat er Nu gelijk aan de hoofdkleur; met Geen accentkleur zet u hem weer gelijk;
• Achtergrond — van de pagina.

Een strook eronder toont het voorstel. Met Toepassen op alle kleuren zet u in één keer een compleet palet waarin alle tekst leesbaar uitkomt. Daarna kunt u elke kleur nog los bijstellen. Met Ongedaan maken zet u alles terug, en er wordt pas iets bewaard als u op Opslaan klikt.

De groepen. Klik op een groep om hem open of dicht te klappen; Algemeen en Menubalk staan bij het openen al open. Achter de groepsnaam ziet u een paar bolletjes met de kleuren erin.

| Groep | Kleuren |

|—|—|

| Algemeen | Achtergrond pagina, Tekstkleur, Kopjes, Links, Tekst homepagina en zijbalk |

| Menubalk | Achtergrond menubalk, Menutekst, Achtergrond menuknop, Achtergrond menuknop bij aanwijzen, Menutekst bij aanwijzen, Tekst uitklapmenu, Tekst uitklapmenu bij aanwijzen, Scheidingslijnen, Iconen in de menubalk |

| Knoppen | Knopkleur, Knoptekst |

| Bestelstappen | Huidige en afgeronde stap, Icoon huidige stap, Volgende stappen, Icoon volgende stappen, Lijn en rand volgende stappen |

| Foto’s | Rand om foto’s, Rand gekozen foto, Waas bij aanwijzen |

| Categorieën | Achtergrond categorienaam, Categorienaam, Categorienaam bij aanwijzen |

| Producten | Achtergrond productnaam, Productnaam, Achtergrond prijs, Prijs |

| Winkelwagen | Kop winkelmandje, Tekst kop winkelmandje, Achtergrond overzicht, Tekst overzicht, Randen en lijnen |

| Voettekst | Achtergrond voettekst, Tekst voettekst, Tekst voettekst bij aanwijzen |

| E-mails | Kopjes en accenten, Knopkleur, Knoptekst, Achtergrond infoblok, Achtergrond voettekst |

Bij elke kleur staat in één zin waar hij in de webshop te zien is. Bij sommige staat ook wat er gebeurt als hij leeg is, bijvoorbeeld “Leeg: de pagina is wit.”

Een kleur kiezen. Klik op het kleurvlakje om een kleur te kiezen, of typ een hexcode in het vakje ernaast, bijvoorbeeld #1F3A5F. Een code zonder # of met drie tekens mag ook. Typt u iets wat geen hexcode is, dan kleurt het vakje rood met “Gebruik een hexcode zoals #1F3A5F”. Heeft u een kleur veranderd, dan verschijnt er een rond pijl-icoon waarmee u die ene kleur terugzet naar de opgeslagen kleur.

Gekoppelde kleuren. Een aantal kleuren is nieuw en neemt automatisch een andere kleur over, zodat uw webshop er na deze verandering precies hetzelfde uitziet. Zo’n kleur toont Volgt “…” met de naam van de kleur die hij overneemt, en in het hexvakje staat volgt. Kiest u er zelf een kleur voor, dan wordt de koppeling losgemaakt; met de knop Weer laten volgen: “…” (of Terug naar standaard) zet u hem terug. Bij een kleur die door andere kleuren wordt overgenomen, staat Ook gebruikt voor: … — verandert u die kleur, dan veranderen die andere mee.

Leesbaarheid. Bij elke tekstkleur rekent het scherm uit hoe goed hij leest op de achtergrond waar hij in de webshop op staat:

• Goed leesbaar — de tekst is duidelijk genoeg.
• Matig leesbaar — de gekozen kleur blijft staan, maar leest minder goed.
• Slecht leesbaar — met erachter de webshop toont hier zwart of wit: klanten zien op die plek dan niet uw kleur maar zwart of wit, zodat ze de tekst toch kunnen lezen. Bij kopjes en knoptekst gebeurt dat ook al bij Matig.

Het getal tussen haakjes is de contrastverhouding; houd de muis op het label voor de uitleg. Is er minstens één tekstkleur slecht leesbaar, dan staat bovenaan een rode melding, bijvoorbeeld “2 tekstkleuren zijn slecht leesbaar.”, met de knop Bekijk. Die springt telkens naar de volgende kleur die het betreft. Kies daar zelf een kleur die past; dan blijft uw eigen kleur staan.

Het voorbeeld. Rechts ziet u een nagebouwde webshop — geen echte pagina van uw site. Wijst u links een kleur aan, dan licht in het voorbeeld op waar hij staat; klikt u in het voorbeeld op een onderdeel, dan springt het scherm naar de kleur die daarbij hoort. Met de knoppen Webshop en E-mail boven het voorbeeld wisselt u tussen de webshop en een voorbeeldmail. Wijst u een kleur uit de groep E-mails aan, dan schakelt het voorbeeld vanzelf naar de mail. Het voorbeeld gebruikt ook de lettertypes die u op Teksten kiest, en toont het menu aan de zijkant als u dat op Menu zo hebt ingesteld.

Op een smal scherm, zoals een tablet of telefoon, staat het voorbeeld bovenaan en blijft het staan terwijl u door de kleuren scrolt. Met Voorbeeld verbergen klapt u het in, met Voorbeeld tonen weer uit.

Sinds 24 september 2026 tonen ook de tabbladen Menu, Teksten en Knoppen rechts ditzelfde webshopvoorbeeld, in plaats van de losse demo’s van vroeger.

De kleuren van e-mails. De groep E-mails bepaalt de kleuren van de mails aan uw klanten, zoals de bestelbevestiging, de inloggegevens en herinneringen. Zolang u daar niets kiest, volgen ze de webshop: de knop krijgt de knopkleur van de webshop, het infoblok de achtergrond van de menubalk, enzovoort. Voor Kopjes en accenten wordt dan de eerste webshopkleur gebruikt die op een witte achtergrond goed leesbaar is, zodat een witte menutekst geen witte kop in de mail wordt. De tekst in het infoblok en in de voettekst van de mail wordt vanzelf zwart of wit.

Menu #

• Menu-item ronding (border-radius) — een tekstveld met het voorbeeld bijv. 4px. Deze ronding komt op de blokjes achter de menu-items. De webshop neemt over wat u typt, dus zet de eenheid erachter, zoals 4px; een kaal getal zoals 4 heeft geen effect.
• Ronding randen kopstukken — verplicht, met de toelichting In pixels, tussen 0 en 30. Standaardwaarde: 2,5. Met de pijltjes in het veld gaat de waarde in stappen van 0,1 tussen 0 en 30. Zonder waarde kunt u het design niet opslaan. De webshop gebruikt deze ronding onder meer voor de hoeken van de foto’s in het fotooverzicht en van de zijbalk.
• Positie menubar — boven of links. Kiest u links, dan komt de navigatie als zijbalk te staan en verandert de indeling van de hele site mee.

De kleuren van het menu, het winkelmandje en de voettekst staan onder Kleuren.

Teksten #

Hier kiest u de lettertypes uit een vaste lijst: Lettertype titels, Lettertype (de lopende tekst), Lettertype links (de menu-items en het winkelmandje in de menubalk) en Lettertype knop. De tekstkleur staat onder Kleuren → Algemeen → Tekstkleur.

Knoppen #

Het veld Vul de ronding van de knoppen in (verplicht), met de toelichting In pixels, tussen 0 en 30. Standaardwaarde: 2,5. Met de pijltjes in het veld gaat de waarde in stappen van 0,1 tussen 0 en 30. Hoe hoger de waarde, hoe ronder de knoppen. Zonder waarde kunt u het design niet opslaan. De knopkleuren staan onder Kleuren → Knoppen.

Op je website #

Dit tabblad geeft u stukjes code om op uw eigen website te plakken, bijvoorbeeld in WordPress of Wix. Op dit tabblad valt niets te bewaren, en op uw eigen website verandert niets zolang u de code niet plakt. De knop Opslaan blijft wel werken voor wat u op de andere tabbladen heeft veranderd: is hij hier niet grijs, dan staan er elders nog niet-opgeslagen wijzigingen.

De code gebruikt het adres uit Domein naam op het tabblad Algemeen. Verandert die domeinnaam, plak de code dan opnieuw. Heeft uw site nog geen geldige domeinnaam, dan staat er in rood Deze site heeft nog geen geldige domeinnaam (tabblad Algemeen, “Domein naam”). Zonder domeinnaam is er geen code; vraag ons de domeinnaam in te stellen.

Bij elke code staat een knop Kopieer code. Daarna staat er Gekopieerd. Lukt kopiëren niet, dan leest u Kopiëren lukte niet. Selecteer de code in het veld hierboven en kopieer met Ctrl+C (Mac: Cmd+C). Klikt u in het codeveld, dan wordt de hele code al geselecteerd.

Klantenlogin op je eigen website #

Met de code Inlogvak (iframe) zet u een klein inlogvak op uw website, met de kop Bekijk je foto’s. Uw klant vult daar de code en het wachtwoord van zijn inlogkaart in en klikt op Naar mijn foto’s. Uw webshop opent dan in een nieuw tabblad en logt de klant meteen in; sinds 4 oktober 2026 hoeft hij daar niet meer op Inloggen te klikken. Klopt de code of het wachtwoord niet, dan ziet hij in de webshop de gewone foutmelding en staan beide nog ingevuld, zodat hij ze kan verbeteren. Vult hij alleen de code in, dan staat die in de webshop klaar en vult hij het wachtwoord daar zelf in. Laat de klant de code leeg, dan staat er Vul je code in.

• Het inlogvak neemt de kleuren en het lettertype van dit Design-scherm over.
• Met de link Voorbeeld van het inlogvak openen (nieuw tabblad) ziet u het vak zoals uw bezoekers het krijgen.
• Staat uw website op een systeem dat geen iframes toestaat, gebruik dan de tweede code, Link naar de inlogpagina: een gewone link Bekijk je foto’s naar de inlogpagina van uw webshop.
• Wat het niet doet: uw klant logt niet in op uw eigen website zelf.
• Het inlogvak werkt alleen op sites waar klanten met de code van een inlogkaart inloggen. Op andere sites toont dit tabblad de code wel, maar geeft het adres een foutpagina; controleer dat met de voorbeeldlink voordat u de code plakt.

Albumoverzicht op je eigen website #

Bij fotografensites en fotoservicesites staat daaronder ook het blok Albumoverzicht op je eigen website. Met die code zet u de albums van uw webshop op uw eigen website. Kies eerst:

• Weergave — Foto’s met albumnaam (een raster van foto’s met de naam eronder) of Keuzelijst (een lijst Kies een album met een knop Bekijk album);
• Volgorde — Nieuwste album eerst of Op albumnaam (A-Z).

De code in het veld Albumoverzicht (iframe + script) past zich direct aan uw keuze aan; plak hem daarna. Met Voorbeeld van het albumoverzicht openen (nieuw tabblad) ziet u het resultaat.

Wat de bezoeker ziet:

• dezelfde albums als op de startpagina van uw webshop: alleen albums die online staan, volgens uw instellingen voor open en besloten albums;
• bij de foto’s per keer 24 albums, met een knop Meer albums als er meer zijn; bij een afgeschermd album staat Inloggen nodig;
• zijn er geen albums, dan Er staan nog geen albums online.

Een klik opent het album in een nieuw tabblad van uw webshop; bij een afgeschermd album komt uw klant eerst op de inlogpagina. Een nieuw album verschijnt vanzelf; u hoeft de code niet opnieuw te plakken.

De code bestaat uit het vak zelf en een klein script eronder dat de hoogte van het vak aanpast aan het aantal albums. Laat u dat script weg — sommige websitebouwers staan geen scripts toe — dan blijft het vak even hoog als in de code staat en krijgt het zo nodig een schuifbalk.

Wat het niet doet: foto’s of prijzen laten zien op uw eigen website, of zoeken in uw albums.

Ziet u uw wijziging niet terug op de site? #

Sinds 24 september 2026 krijgt de webshop na Opslaan direct een seintje, zodat een opgeslagen design bij de volgende keer laden te zien is. Lukt dat seintje een keer niet, dan staat het er binnen ongeveer 10 seconden. Laad de webshop daarna opnieuw; een gewone herlaadactie is genoeg. Tot die datum kon het een paar minuten duren voordat bezoekers de nieuwe kleuren zagen.

Krijgt u na Opslaan de melding Er is iets fout gegaan terwijl u niets verkeerd hebt ingevuld, dan kan een deel van uw ontwerp toch al bewaard zijn. Verlaat het scherm, open het opnieuw en kijk wat er staat voordat u nog eens opslaat.

Verder lezen #

• Instellingen — module-overzicht
• Watermerk uploaden en positioneren
• Hiërarchie en volgorde van pagina’s — voor het menu zelf; op dit scherm stelt u alleen de kleuren ervan in.
• E-mailsjablonen — overzicht — voor de tekst van de mails; op dit scherm stelt u alleen de kleuren ervan in.