Klachtenregistratie
Klik hier voor het Klachtenformulier
Ontwerpen op Acryl
Hoe ontwerp ik standaard Acryl kaarten
| Formaten | Vierkant 13x13cm, staand en liggend 11x17cm en 10x15cm |
| Materiaal | Freeform Acryl, 2mm Glashelder, hard, glanzend, doorzichtig kunststof, 2mm |
| Levertijd | 5 tot 7 werkdagen |
| Minimale oplage | 10 |
| Beschikbaarheid | Alleen beschikbaar voor enkele kaarten, niet in combinatie met stans |
| Foliedruk | Niet mogelijk |
| Bedrukking | Enkelzijdige bedrukking aan achterzijde |
Maak een kaart op zoals normaal. Automatisch wordt een afbeelding in de achtergrond geplaatst die acrylglas simuleert. Dit element is vergrendeld en kan dus niet verplaatst worden door de klant.
Acrylkaarten achtergrond kiezen in de editor
De kaart kan verder opgemaakt worden als normaal, het uploaden van foto’s en afbeeldingen is mogelijk. Dekwit wordt automatisch onder de tekst en SVG-elementen gezet. Dit maakt het toevoegen van PNG-afbeeldingen niet mogelijk omdat je dan een wit vlak achter de afbeelding krijgt. Dit werkt hetzelfde als op kraftkaarten.
Acrylkaarten ontwerpen in de editor
De kaarten kunnen in elke subcategorie geplaatst worden. Zet het materiaalsoort Acryl, 2mm Glashelder, hard, glanzend, doorzichtig kunststof, 2mm aan onder Ingeschakelde papiersoorten in de categorie-instellingen van de hoofdcategorie waaronder de subcategorie staat.
Opmerking
Er wordt online een grijze achtergrond getoond. Dit simuleert het transparant acrylglas. Op Acrylkaarten worden transparante delen van PNG-bestanden wit gekleurd. Gebruik daarom alleen SVG-bestanden. Door het dekwit komen de kleuren nog mooier uit. Alleen de voorzijde wordt bewerkt, de andere zijde van het Acryl blijft onbedrukt. De klant dient de enveloppen los te bestellen, de kaartjes en de enveloppen komen dus apart van elkaar binnen bij de klant.
Tip
Wanneer je kaarten gaat uploaden op de pagina, dan zijn ze op de PDP gewoon wit. Van het doorzichtige Acryl kunnen we nog geen preview maken. Er wordt aangeraden te werken met featured images.
Voorbeeld acrylkaart
Labelkaarten op A4 drukvellen met nikken
Het uitgangspunt voor het maken van “vaste” set kaarten is het A4 formaat drukvel. De kaartformaten zijn vantevoren vastgesteld. Binnen deze kaartformaten kunnen vrije vormen geplaatst worden. De set kaarten wordt op een A4-drukvel gedrukt, waarbij de vormen met enkele ‘nikken’ vast blijven zitten in het A4 vel. Het volledige vel wordt vervolgens naar de klant gestuurd, die de vormen dan zelf kan uitdrukken. Deze methode is sneller en zorgt voor minder beschadigingen.
| Afmetingen | 210 x 297 mm |
| Papiersoort | Coated karton (Freeform) en Linnen 300gr (Freeform) |
| Bedrukking | Full-color, dubbelzijdig |
| Aflopend drukken | mogelijk |
| Stansvormen | Stansvormen blijven in het A4 vel zitten door middel van de nikken |
| Freeform product | kaarten kunnen niet rechtstreeks verzonden worden. |
| Let op | Let bij Linnen papier goed op! Dit kan rafelen door de laser. Een herdruk moet altijd op Coated karton gedaan worden. Ronde hoeken inschakelen in de editor is niet mogelijk, maar in de stansvorm zijn rondingen natuurlijk wel mogelijk. De stansvorm mag niet worden ‘bijgesneden’ in de Editor. |
We bieden onderstaande formaten aan op een A4 vel:
Vormen en formaten op een A4 vel met nikken
Envelop rechthoekig – 12×18 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 110 x 171 mm
- kaart 2: 88 x 171 mm
- kaart 3: 110 x 110 mm
- kaart 4: 88 x 110 mm
Envelop rechthoekig – 12×18 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 114 x 171 mm
- kaart 2: 114 x 171 mm
- kaart 3 (fotostrip): 55 x 171
Envelop rechthoekig – 12×18 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 171 x 110 mm
- kaart 2: 171 x 88 mm
- kaart 3: 110 x 88 mm
- kaart 4: 110 x 110 mm
envelop panorama – 22×11 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 208 x 99 mm
- kaart 2: 208 x 99 mm
- kaart 3: 120 x 77 mm
- kaart 4: 77 x 77 mm
envelop langwerpig – 11×22 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 99 x 208 mm
- kaart 2: 99 x 208 mm
- kaart 3: 77 x 120 mm
- kaart 4: 77 x 77 mm
envelop vierkant – 14×14 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 129 x 129 mm
- kaart 2: 129 x 129 mm
- kaart 3: 129 x 69 mm
- kaart 4: 69 x 129 mm
envelop staand – 12×18 cm
gedrukt op A4 drukvel met nikken
- kaart 1: 171 x 114 mm
- kaart 2: 171 x 114 mm
Hoe ontwerp ik op een A4 drukvel met nikken?
1.1 Een ‘vaste set’ op een A4 drukvel
We hebben een serie nieuwe templates gemaakt voor labelkaarten. Na het ontwerpen worden deze samengevoegd tot één drukklare PDF. Het grote voordeel van deze werkwijze is dat de klant in de editor de afzonderlijke pagina’s ziet. Dus geen gedoe meer met alle kaarten op één pagina, rekening houden met afloop of werken op een 90° gedraaide kaart. Bovendien leveren we de set nu uit als complete vellen met nikken.
Het Freeform A4-drukvel met een vaste set maak je hetzelfde op als een stanskaart. Je ziet in de editor meerdere pagina’s waarop de stansvorm geplaatst kan worden. Zorg dat de vormen binnen het paginaformaat blijven.
- Voor deze vaste sets is het niet noodzakelijk om een hoofdcategorie aan te maken maar het mag wel i.v.m. eventuele GoogleAds campagnes.
- Maak een tag aan voor de sets. Naar tags
- Open het Freeform via de /kaarttype pagina
- Je kan nu aan de slag met het ontwerpen van jouw ‘vaste sets op A4 drukvel’.
Stappenplan
- Kies welke vorm(en) je wilt gebruiken.
- Maak in Illustrator de gewenste stansvormen en sla deze op als svg. Naar stansvorm maken
- Open het juiste template in de editor.
- Plaats de stansvormen op de voorkant van de kaarten. In de editor is dit pagina 1, pagina 3, pagina 5 enzovoort.
- Zet deze vormen op “stans is omgekeerd”, zoals je ook bij andere stanskaarten zou doen.
- Plaats dezelfde vorm op de achterzijde en zet ook deze op “stans is omgekeerd”, maar zet deze niet op printen. De vorm is hier alleen ter aanduiding.
- Maak de druk PDF. Je ziet nu alle vier de kaarten met stansvorm op één A4-vel staan.
Tip
Bij Freeform-nummers 1883, 1884, 1886, 1887, 1888 en 1889 is het sinds kort mogelijk om pagina’s op niet tonen te zetten. Hierdoor kun je er bijvoorbeeld voor kiezen om in plaats van 4 kaarten, slechts 3 kaarten te laten zien.
Let er hierbij wel op dat de verborgen pagina’s helemaal leeg zijn. Dus geen design, maar ook geen stansvorm.
Wanneer je de gewenste kaart opent in de editor, ga je naar het tandwielmenu. Hier vink je ‘Pagina niet tonen’ aan. Vervolgens kun je de kaart opslaan. De instelling wordt dan meegenomen.
Belangrijk
Deze templates worden aangeboden zonder stansvormen er in. Je bepaalt dus volledig zelf de vorm van de kaart. Als je een rechthoekige kaart wilt aanbieden moet er een rechthoekige stansvorm geplaatst worden
Tip
Wanneer je een kleinere stansvorm gebruikt, zorg dan dat deze precies in het midden van de kaart staat. Alleen dan wordt de achterzijde correct gepositioneerd ten op zichte van de voorzijde.
Maak een categorie aan
- Selecteer bij de hoofdcategorie-instellingen:
- Coated karton (Freeform) en Linnen 300grams (Freeform) als materiaal
- Vraag aan Support om één van de producten of alle ‘vaste sets op A4 drukvel’ aan te zetten in de shop.
Wil je meer weten over het maken van een categorie? Ga naar: CMS: Kaarten op je site zetten
Maak een tag aan
Tip
Maak, bijvoorbeeld, een taggroep ‘labels en vormen’. Hieronder kun je tags voor jouw kaartvormen aanmaken zoals rond, ovaal etc. Of voeg bijvoorbeeld een tag ‘Labelkaart’ en ‘stansvel’ toe aan een bestaande taggroep.
Wil je meer weten over het aanmaken van tags? Ga naar: CMS: Kaarten op je site zetten
Design aan de shop toevoegen
- Sla het design in de editor op door de knop ‘Nieuw ontwerp’. Daarna kunnen in het CMS – Content – Voorgestelde designs de categorie en tags aan het design worden toegewezen.
- Hierna werkt het opslaan in de collectie en het live zetten hetzelfde als bij kaarten.
- Kies voor het life event dat past bij het ontwerp.
Tip
Meet de grootte van je stansvormen in Illustrator en vermeld de grootte in de kaartbeschrijving. Dit is handige informatie voor klanten, vooral als er meerdere vormen zijn.
Veel gemaakte ontwerpfouten
- Veel orders gaan fout, omdat er stanslijnen door elkaar lopen en/of de stanslijn niet volledig is.
- De vorm die je wilt uploaden moet 1 geheel zijn. Je kunt er 1 vorm van maken met behulp van pathfinder in Illustrator.
Stansvorm met teveel stanslijnen
Hoe controleer je een dubbele stansvorm
Ga naar het design waar het over gaat. Dit kan een order van een klant zijn of het originele bestand.
Download het DrukPDF:
Open het DrukPDF in Adobe illustraitor:
Selecteer met het witte pijltje de vorm die je wil controleren.
Gebruik shortcut Command + 3 om de vorm te verbergen. Dit doe je met elke vorm die zichtbaar is. Wanneer je een vorm vast hebt en je gebruikt de shortcut dan kan het nog zijn dat er een vorm zichtbaar is. Dit betekent dus dat er 2 vormen op elkaar zit en er dus een dubbele contour ontstaat.
Zo komt het er uit te zien als je alle vormen hebt verborgen. In dit geval blijft er een extra ‘rondje’ over, Je verwijdert dan deze rest vormen, achtergronden en teksten.
Met de shortcut Option + Command + 3 krijg je alle vormen die je eerder hebt verborgen weer in beeld. Dit doe je om te controleren of je wel alle vormen had aangeklikt.
Shortcuts:
- CMD + 3 – objecten verbergen.
- Option + CMD + 3 – objecten weer terug laten komen.
- CMD + Y – zwart witte outline laten zien. Creeërt overzicht.
- Te kleine vormen met hoeken die kleiner zijn dan 45 graden zijn niet mogelijk.
- Zie onderstaand voorbeeld bij zowel de ster als de maan.
Te fijne stansvormen
- Soms wordt er een extra stanslijn aan de vorm toegevoegd, dit kan in de productie leiden tot een kaart die niet als geheel maar in twee stukken wordt geproduceerd.
- Zie onderstaand voorbeeld:
Extra stanslijnen
- De stanslijn dient op het gewenste object te worden geplaatst. Bij onderstaand voorbeeld onstaat er een soort puzzel, omdat er allemaal losse elementen worden gesneden. Het opruimen van deze elementen kost heel veel tijd.
Extra stanslijnen
Opmerking
Maak van jouw stansvorm 1 volledige vorm.
- Soms wordt er een te grillige stanslijn aan de vorm toegevoegd, dit kan in de productie leiden tot een kaart die geweigerd wordt.
- Zie onderstaand voorbeeld:
Gerafelde kaarten met grillige stanslijnen
Opmerking
Maak van jouw stansvorm vloeiend. Zorg dat er geen loze ankerpunten in de vorm staan
- Zorg ervoor dat de grootte van je tekengebied (canvas) in Illustrator precies overeenkomt met de uiteindelijke grootte van de kaart. Voeg de bleedbreedte niet toe in het tekengebied.
- Zorg ervoor dat er 3 mm vrije ruimte (bleed) rondom elke stansvorm is, net zoals bij normaal gesneden kaarten. De afstand tussen twee stansvormen moet daarom minstens 5-6 mm zijn.
- Plaats afbeeldingen 3 mm over de rand van een vorm om dezelfde reden, zodat je een goede print en snede krijgt zonder witte snijlijnen.
A4 Adresstickers Sets
Maak eenvoudig persoonlijke adresstickers in jouw eigen stijl. Pas de tekst en opmaak helemaal naar wens aan. Deze luxe stickers zijn verkrijgbaar in handige sets op A4-formaat. Zo geef je iedere envelop eenvoudig een persoonlijke en stijlvolle touch. Deze stickers zijn geschikt voor folie en spotuv.
Productspecificaties
| Titel product | Adresstickers set |
| Varianten | FF1638 Adressticker – Ronde hoek 97x34mm – Set 1 vel FF1629 Adressticker – Ronde hoek 97x34mm – Set 2 vel FF1628 Adressticker – Ronde hoek 97x34mm – Set 3 vel FF1627 Adressticker – Ronde hoek 97x34mm – Set 4 vel FF1626 Adressticker – Ronde hoek 97x34mm – Set 5 vel FF1625 Adressticker – Ronde hoek 97x34mm – Set 6 vel FF1639 Adressticker – Rechte hoek 97x45mm – Set 1 vel FF1574 Adressticker – Rechte hoek 97x45mm – Set 2 vel FF1589 Adressticker – Rechte hoek 97x45mm – Set 3 vel FF1219 Adressticker – Rechte hoek 97x45mm – Set 4 vel FF1588 Adressticker – Rechte hoek 97x45mm – Set 5 vel FF1573 Adressticker – Rechte hoek 97x45mm – Set 6 vel |
| Formaat product | 97×34 mm ronde hoek 97×45 m rechte hoek |
| Materiaal of papiersoort | Sticker MC mat (Freeform) |
| Merk | Sparkles Printing |
| Proefdruk | Nee |
| Prijzen | Vanaf €8,95 |
| Levertijd | 2-3 werkdagen |
Voorbeeld afbeelding
Opmaakinstructies
| Formaat drukvlak | 97×34 mm ronde hoek 97×45 m rechte hoek |
| Productietechniek | Digitaal print |
| Wit mogelijk | Nee |
| Folie / spot UV mogelijk | Ja |
| Ingesteld kleurenpallet | Freeform |
| Ingestelde fonts | Geen |
| PDP bewerkbaar | Nee |
| Editor mogelijk | Ja |
| Set | Ja, hoe maak je een set? |
USP’s voor de klant
| USP’s | Makkelijk op te bewerken Geen afzonderlijke vellen bestellen Folie en SpotUV mogelijk |
* Afbeeldingen zijn eigendom van Sparkles B.V. en zijn niet bedoeld voor hergebruik.
Houten bewaardoos
De houten opbergdozen zijn handige bewaarboxen, uitgevoerd in twee formaten en gemaakt van multiplex. Door het uitschuifbare deksel zijn ze praktisch in gebruik en goed te personaliseren met een eigen ontwerp. Houd er rekening mee dat het een natuurproduct betreft: kleur en afwerking kunnen steeds iets verschillen.
Productspecificaties
| Titel product | Houten opbergdoos |
| Advies retailprijs | Groot 49,95 Middel 39,99 |
| Varianten | FF 612 – Houten opbergdoos groot FF 899 – Houten opbergdoos middel |
| Formaat product | Groot: 37 x 34 cm (breed) en 28 cm (hoog) Middel: 35 x 25 (breed) x 18 cm (hoog) |
| Materiaal of papiersoort | Multiplex (hout) |
| Merk | Sparkles Gifting |
| Levertijd | 5-7 werkdagen |
Voorbeeld afbeelding
Opmaakinstructies
| Formaat drukvlak | 28 x 19 cm – beide formaten Niet aflopend drukken ivm inkeping in deksel om deze uit te schuiven |
| Productietechniek | Sublimatie |
| Wit / dekwit mogelijk | Nee |
| Folie / spot UV mogelijk | Nee |
| PDP bewerkbaar | Nee |
| Editor mogelijk | Ja |
| Ingesteld kleurenpallet | Ja |
| Ingestelde fonts | Ja |
| Max aantal karakters | Nee |
Tip: Het meest optimale resultaat krijg je door de houten achtergrond van de doos zichtbaar te houden in het ontwerp. Maak geen gebruik van full-colour (FC) vlakvulling. In de editor ligt standaard een houten achtergrond klaar (staat op niet printen). Overweeg om de achtergrond in de editor te vergrendelen, zodat de kleur niet aangepast kan worden.
Uploadspecificaties
| Aparte categorie | Advies: maak een categorie aan voor geboorte of trouw producten (bijvoorbeeld Gift, Baby Memories of Wedding Memories). |
| Materiaal aanvinken | Multiplex |
| Beeld genereren | Nee (er is een automatisch PIP-beeld) |
USP’s voor de klant
| USP’s | Full-colour gedrukt op natuurlijk materiaal Handige houten opbergkist Verkrijgbaar in 2 formaten Gemakkelijk volledig te personaliseren |
FAQ’s
Helaas drukken wij geen wit op deze kisten. Ontwerpen worden gedrukt op de natuurlijke (kleur) ondergrond van het hout.
Ja, dat kan! Gebruik elementjes uit je kaart om de opbergdoos te personaliseren en maak gebruik van de houten achtergrond. Full-colour achtergronden worden niet aanbevolen: laat de houtstructuur zichtbaar blijven voor het mooiste resultaat.
We leveren alleen blank houten varianten, in twee formaten. Een volledig witte opbergdoos bieden we niet aan.
Wij graveren geen opbergdozen. De boxen worden uitsluitend bedrukt met een fullcolour print, waardoor je het ontwerp volledig kunt aanpassen aan de stijl van jouw kaart.
Gepersonaliseerde kisten kunnen niet worden geretourneerd, omdat ze speciaal voor jou worden geproduceerd. Neem bij problemen contact op met onze klantenservice.
* Afbeeldingen zijn eigendom van Sparkles B.V. en zijn niet bedoeld voor hergebruik.
Handleiding Shop Thema en Page Builder
In deze handleiding leggen we uit hoe je werkt met de nieuwe Shop Thema en Page Builder. En tonen we de filmpjes met visuele uitleg.
1. Introductie
Specificaties
Met de nieuwe Header & Footer Builder kunnen webshop-eigenaren zelf hun header en footer vormgeven. Deze hand-out helpt gebruikers op weg met de basisstappen en een overzicht van de belangrijkste functies.
2. Shop Thema-instellingen (stijlinstellingen voor je thema)
Ga in het CMS naar: ‘CMS / layout /Shop Thema → Shop thema instellen‘.
Hier stel je de algemene vormgeving/huisstijl van je webshop in.
Klik op ‘Nieuw Shopthema toevoegen‘ (groene knop rechtsboven)
2.1 Kleurnamen
- Minimaal 2 en maximaal 9 kleuren instelbaar. Van deze kleuren maakt het nog twee tinten dus uiteindelijk heb je 27 kleuren om uit te kiezen.
- Klik op de kleur en kies in het kleuren menu de Hex-code en vul deze in.
Klik achter iedere kleur afzonderlijk op ‘Opslaan’ (diskette)
- Deze kleuren kunnen vervolgens gekozen en gebruikt worden voor buttons, tekst, achtergronden en andere elementen waar de kleur instelbaar is.
2.2 Lettertypen (fonts)
- Stel het primary en secondary lettertype in.
- Er kan gekozen worden uit de lettertypen die tevoorschijn komen in het lijstje.
- Klik achter ieder font op ‘Opslaan‘ (diskette).
Het primary-lettertype is het basis lettertype en wordt gebruikt voor de body-tekst en in de (navigatie) menu’s. Het secondary-lettertype wordt gebruikt voor kopjes.
2.3 Hoeken
Je kunt kiezen uit vooringestelde waarden.
Button-hoeken
Pas de afronding van knoppen aan door de ‘Radius’ te kiezen. Dit is de ronding van de hoek. Hiermee bepaal je of knoppen hoekig, mild afgerond of volledig rond ogen. Klik op ‘Shopthema opslaan‘ als je klaar bent.
Border-hoeken
Dit werkt hetzelfde als de button-hoeken. Kleine tip: maak deze gelijk aan elkaar, dit zorgt voor een consistent design van de knoppen en borders. Klik op ‘Opslaan‘ als je klaar bent.
3. Footer Builder
De footer is te bewerken via het CMS menu:
Layout/Footer → Scroll naar beneden op de pagina (de velden kun je verder leeg laten) → Klik op Shop element aanpassen
3.1 Voorvertoning & devices
Boven in de editor staan drie weergave-opties:
- Desktop
- Tablet
- Mobiel
Daarnaast:
- Preview-knop (vierkant met pijl) → hier bekijk je hoe je header eruitziet
- Export changes → gebruik dit alleen als je klaar bent met bewerken (versie opslaan)
In het linkermenu vind je verschillende elementen die je naar de rechterzijde kunt slepen. Er verschijnt een groene balk die aangeeft waar het element naartoe gesleept moet worden. Zodra je het element naar de juiste plek hebt gesleept, zal deze verschijnen.
Om steeds terug te gaan naar het hoofdmenu klik je op het plusje.
3.2 Elementopties
Wanneer je een element selecteert, zijn dit de beschikbare acties:
- Verwijderen (prullenbak)
- Kopiëren (kopieer icoon)
- Plakken (plak icoon)
- Verplaatsen (pijl alle kanten icoon)
- Onderliggend element selecteren (niveau hoger)
3.3 Footer USP
Element met Unique Selling Points – Footer Usp
- Sleep het balkje naar rechts totdat er een groene streep verschijnt.
Vervolgens kun je de Footer USP’s opmaken.
- Als je kiest voor Mobiel dan wordt de Footer Usp weergegeven als een Swiper.
- Klik op ‘Toon alle slides‘ om alle Usp’s te tonen.
3.4 Footer Shipping methods
Afhankelijk van welk ‘doos’/kader/container je kiest krijg je verschillende optie in het linkermenu te zien
Hier worden de verzendwijzen en betaalmethoden toegevoegd. Je kunt de afbeeldingen naar wens toevoegen/verwijderen. Je kunt de volgorde wijzigen door te slepen.
3.5 Footer Menu
Er worden 5 kolommen toegevoegd in de footer. Door op een tandwieltje te klikken kun je per kolom de tekst wijzigen. Links voeg je toe door op het menu-item te klikken en onder Href de link toe te voegen. Je voegt extra kolommen toe door te kopiëren.
3.6 Footer Mobile Menu
Mobiele variant van het menu. Kies mobiele weergave.
Dit werkt met accordeons voor compacte presentatie.
3.7 Footer Disclaimer
- Vrij configureerbare tekst.
- Perfect voor juridische tekst, copyright of voorwaarden.
- Door de juiste container te kiezen kun je een link toevoegen die dan extern verwijst naar bv Facebook
4. Header Builder
De header is te bewerken via het CMS menu:
Layout / Header → Scrol naar beneden op de pagina (de velden kun je verder leeg laten) –> Klik op — Creëer shopelement.
4.1 Voorvertoning & devices
Boven in de editor staan drie weergave-opties:
- Desktop
- Tablet
- Mobiel
Daarnaast:
- Preview-knop (vierkant met pijl) → hier bekijk hoe je header eruitziet.
- Export changes → gebruik dit alleen als je klaar bent met bewerken (versie opslaan).
5. Header-elementen (Add blocks)
In het linkermenu vind je verschillende elementen die je naar de rechterzijde kunt slepen. Er verschijnt een groene balk met waar het element naartoe gesleept moet worden. Zodra je het element naar de juiste plek hebt gesleept, zal deze verschijnen.
Om steeds terug te gaan naar het hoofdmenu klik je op het Plusje.
5.1 Elementopties
Wanneer je een element selecteert, zijn dit de beschikbare acties:
- Verwijderen (prullenbak)
- Kopiëren (kopieer icoon)
- Verplaatsen (pijl alle kanten icoon)
- Onderliggend element selecteren (niveau hoger)
5.2 USP Bar
Er zijn twee varianten:
1. Desktop weergave –> Bar
2. Mobiele weergave –> Swiper mobile (dit is een slider)
Afhankelijk van de weergave waar je in zit (desktop of mobiel), wordt de juiste variant van de USP bar getoond.
Desktop weergave
Icoontje aanpassen (het element, zoals een sterretje of hartje, wat voor de USP tekst staat)
- Klik op het icoontje
- In het linkermenu verschijnt de icoon-bibliotheek
- Klik op het gewenste icoontje
Om een ‘ander’ icoontje uit fontawesome toe te voegen, klik je op Icon name:
- Ga naar https://fontawesome.com/icons
- Zoek op het gewenste icoontje (in het Engels)
- Kopieer en plak de titel van het icoontje
Om je eigen icoontje toe te voegen klik je op ’tandwieltje’:
- Klik op ’tandwieltje’
- Verwijder ….. USP
- Kies een andere USP layout
- Vervang de standaard afbeelding door de icoon-afbeelding
Tekst aanpassen
- Klik op de tekst die je wilt aanpassen
- Pas de tekst aan
- Kleur aanpassen kan naar wens in het linkermenu
Kleur aanpassen van de USP bar
- Klik op het verplaats-icoontje in de USP bar
- Klik in het linkermenu op Style
- Klik op de gewenste kleur
Mobiele weergave
Klik op de tekst (USP 1) + klik vervolgens op het tandwieltje van dit venster. Klik in het linkermenu op ‘Show all slides’ om alle USP’s te tonen en aan te passen.
- Slides per view: hoeveel USP’s in beeld komen per slide
- Space between slides: de hoeveelheid ruimte tussen de USP’s
- Show navigation: er worden pijltjes toegevoegd aan beide zijdes van de USP, zodat de klant dit handmatig kan swipen
- Show bullets: er komen bullets onder de USP’s te staan. De hoeveelheid USP’s die je toegevoegd komt overeen met de hoeveelheid bullets.
- Loop: hiermee zorg je dat na de laatste slide de eerste slide weer wordt getoond
- Autoplay: de swiper start automatisch
- Delay: de tijd dat de USP in beeld blijft voor de volgende USP wordt getoond. Het dient in milliseconden te worden ingevuld. 2 seconden = 2.000 milliseconden.
Icoontje aanpassen
- Klik op het icoontje
- In het linkermenu verschijnt de icoon-bibliotheek
- Klik op het gewenste icoontje
Om een custom icoontje toe te voegen, klik je op Icon name:
- Ga naar https://fontawesome.com/icons
- Zoek op het gewenste icoontje (in het Engels)
- Kopieer en plak de titel van het icoontje
Om je eigen icoontje toe te voegen , klik je op ’tandwieltje’:
- Klik op ’tandwieltje’
- Verwijder ….. USP
- Kies een andere USP layout
- Vervang de standaard afbeelding door de icoon-afbeelding
Tekst aanpassen
- Klik op de tekst die je wilt aanpassen
- Pas de tekst aan
- Kleur aanpassen kan naar wens in het linkermenu
Kleur aanpassen van de USP bar
- Klik op het verplaats-icoontje in de USP bar
- Klik in het linkermenu op Style
- Klik op de gewenste kleur
5.3 Standaard Navigatiebalk
Dit is de standaard menubalk bovenaan de pagina. Het bevat een logo, standaard dropdown-menu en de icoontjes voor je account en winkelmandje.
- Sleep het blok in het linkermenu genaamd Standaard Navigatiebalk naar de rechterzijde. Plaats deze onder de USP bar.
Dropdowns toevoegen
- Klik op Dropdown Menu item in de Standaard Navigatiebalk in het rechterscherm
- Klik op het tandwiel-icoon
- Kies het gewenste menu-item:
- Add menu item: los menu-item (linkje naar een pagina)
- Add item with dropdown: menu-item met een uitklapmenu
- Add item with search dropdown: menu-item waarmee je kunt zoeken in je website
- Add item with mega search: niet relevant voor deze navigatiebalk
- Je voegt het item toe door op het groene plusje te klikken. Het item toont dan vanzelf in het rechterscherm.
Menu items bewerken
Menu item
- Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan.
- Voeg in het linkermenu onder Href de link toe waar het menu naartoe moet linken.
Item with dropdown
- Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan.
- Klik op het tandwieltje
- Klik in het linkermenu op Show dropdown menu
- Klik in het rechterscherm op het dropdownitem en pas de tekst aan
- Voeg in het linkermenu onder Href de link toe waar het menu naartoe moet linken.
- Doe dit voor ieder dropdown item.
- Om nog een extra item in de dropdown toe te voegen, klik op het tandwieltje en vervolgens in het linkermenu op Add menuitem.
Add item with search dropdown
- Deze staat standaard in de Standaard Navigatiebalk (vergrootglas)
Weergave per apparaat
Hier stel je in op welk apparaat de Navigatiebalk zichtbaar is. Dit pas je aan door op het gewenste item in het rechterscherm te klikken. In het linkermenu klik je onder Weergave per apparaat om het menu aan of uit te schakelen met de schakelaar.
5.4 Mega Menu
Dit is het paginabrede-menu wat uitklapt onder je menu. Geschikt voor grotere of visuele menu’s.
Mega menu toevoegen
Sleep het blok in het linkermenu één van de Navigatiebalk met Mega menu naar de rechterzijde. Plaats deze onder de USP bar.
5.5 Mega Menu weergave bewerken
Open het menu via 1. het tandwiel in het Mega menu en klik op 2. Mega menu tonen
Klik op Edit panel en pas het menu aan waar nodig.
- Klik op het tandwiel-icoon in het Mega menu item in de Navigatiebalk in het rechterscherm.
- Klik op Toon Mega menu in het linkerscherm. De dropdown opties worden nu getoond in het rechterscherm.
- Klik op de tekst in het rechterscherm wat je wilt aanpassen en pas de tekst aan.
- Voeg in het linkermenu onder Link de link toe waar het menu naartoe moet linken.
Afbeelding toevoegen
- Verleng de kolom layout van 3 naar 4
- Sleep uit het linkermenu een element met Afbeelding Link
- Klik op de afbeelding wat verschijnt
- Vul in het linkermenu het volgende in:
- op Afbeelding URL: vul link in
- op beschrijving afbeelding: vul Alt tekst in
- op Link: vul de link in
- Op Bestemming: kies het target – Blank/Self
- Vul in het linkermenu het volgende in:
5.6 Elementen (algemene elementen)
Kolommen
Kolommen zijn de basis. Hier kun je elementen aan toevoegen.
- Klik op ‘Selecteer kolomlayout’ in het rechterscherm.
- In het linkerscherm kun je het aantal kolommen kiezen onder ‘Kolom layout’
- Onder ‘Kolom witruimte’ stel je de witruimte tussen de kolommen in. 1 = weinig witruimte, 5 = veel witruimte.
Nu is het tijd om de andere elementen toe te voegen aan de kolommen. Klik op het plusje
Tekst: Sleep Tekst in een kolom om tekst toe te voegen.
Afbeelding: Hiermee voeg je een afbeelding toe aan de kolom. Wanneer je op de website over de afbeelding gaat met je muis zoomt de afbeelding iets in. Je kunt onder de afbeelding nog tekst, buttons en icoontjes toevoegen. Dit kun je toevoegen vanuit het linkermenu.
Button: Hiermee voeg je een losse knop toe.
Dropdown: Hiermee voeg je een button toe met een dropdown menu er onder. Klik op de button in het rechterscherm en vervolgens op het tandwieltje. In het linkermenu klik je op ‘Show dropdown menu’ om de menu-items te tonen en te kunnen wijzigen.
Menu (lijst): Hier kun je een stuk tekst toevoegen met een link eronder. Je bouwt hier dus een menu op.
<>Offcanvas: Hiermee voeg je een button toe. Wanneer je op de button klikt vouwt een zijmenu open. Door op het tandwieltje te klikken, kun je in het linkermenu op ‘Offcanvas panel bewerken’ klikken om de items te wijzigen.
Box: Hiermee voeg je een blok toe. Binnen dit blok kun je meerdere elementen toevoegen, maar deze blijven wel binnen hetzelfde blok.
Icoon: Voeg een icoontje toe in de kolom.
Afbeeldingslink: Hiermee voeg je een afbeelding met een link toe aan de kolom. Door op de afbeelding te klikken kun je in het linkermenu onder:
- Afbeelding URL een link toevoegen naar de afbeelding in het CMS – Bestandsbeheer.
- Beschrijving van de afbeelding een Alt tekst invullen die getoond wordt als je met de muis over de afbeelding gaat.
- Link een link toevoegen waarnaar verwezen moet worden als je op de afbeelding klikt.
- Bestemming kies je of na het klikken een nieuw scherm (blank) wordt geopend of dat je in hetzelfde scherm (self) blijft.
- Weergave per apparaat kun je bepalen op welk device je de afbeelding wilt tonen.
Link: Hiermee voeg je een klikbare link toe aan een kolom/element.
Slider: Voeg meerdere afbeeldingen toe die in de slider passen. In de blokken kun je ook reviews, kaarten of USP’s toevoegen. Voeg je een review of USP toe? Dan kun je in het blokje in de kolom kiezen welke layout je wilt voor je review.
Accordeon: Hiermee voeg je uitklapbare elementen toe. Dit is bijvoorbeeld handig voor je FAQ.
6. OPTIONEEL Tips voor winkel-eigenaren (basis)
- Maak een ontwerp eerst op één device (bijvoorbeeld desktop) en werk daarna pas per device bij. Vul daarna alle links in de menu’s
- Houd kleuren en fonts consistent met je merkidentiteit via ShopThema.
- Gebruik de preview-knop om wijzigingen eerst te controleren, waarna je de versie op kunt slaan.
- Sla pas op met Publiceer wanneer je zeker weet dat alles klaar is, deze wordt daarna nl direct live gezet in de shop.
- Gebruik het mega menu vooral voor grotere assortimenten/submenu’s of veel productcategorieën.
7. Advanced functionaliteiten
Kijk naar Html en de PageBuilder
8. De filmpjes
ELS Introductie
Footer
Header USP
Header Navigatie balk (navbar)
Je antwoord niet gevonden?
Neem gerust contact met ons op, ons Support team staat voor je klaar!
