Template instellingen

Transcriptie

1 Template instellingen Bij Vormgeving/Template instellingen vind je alle mogelijkheden om jouw huisstijl door te voeren in je shop. De template instellingen zijn onderverdeeld in diverse tabbladen. In dit document vind je per tabblad terug wat je zoal kunt aanpassen en hoe. Achtergrondkleuren Achtergrond Achtergrondkleuren Upload hier je achtergrondafbeelding. Klik op Achtergrond positie aanpassen om te bepalen hoe deze getoond wordt (bijvoorbeeld herhaald of gecentreerd). Liever geen afbeelding of gebruik je een afbeelding die niet helemaal doorloopt? Stel dan hier de achtergrondkleur in. Gehele website Favicon Upload hier een logo of icoon van 16x16 pixels. Deze wordt getoond in het tabblad van de internetbrowser. Is je logo te ingewikkeld voor zo n ieniemienie plaatje? Kies dan liever voor een detail uit je logo (zoals de eerste letter). Ondersteunende kleur Witruimte rond paginainhoud Schaduw tonen De ondersteunende kleur wordt gebruikt om op terug te vallen en kun je tegenkomen op diverse plekken. Waar precies? Dat hangt af van je andere kleurinstellingen. Kies hier daarom een neutrale kleur die past binnen je pallet. Als tekst tegen een rand aan staat leest dat niet zo lekker, daarom staat de witruimte automatisch ingesteld op 25 pixels. Plaats je afbeeldingen in de paginainhoud? Dan wil je misschien wel alle 1100 pixels gebruiken. Vul hier dan 0 in. Voeg met een druk op deze knop schaduw toe aan de artikelblokken, blokken in je indeling en het submenu in je navigatie.

2 Artikeloverzichten Stickerkleur Automatische stickers Foto weergave Gebruik je stickerteksten bij artikelen of automatische stickers? Dan krijgen ze deze (tekst)kleur. In hoofdstuk 7.1 lees je er meer over. Schakel deze functie in om automatisch het kortingspercentage te tonen bij artikelen met een actieprijs. Als deze functie aan staat wordt de ruimte voor je artikelafbeelding en subpagina-afbeelding volledig gebruikt. Hoe dat precies uitpakt hangt af van het formaat van je foto s. Uitproberen maar! Witruimte rond foto s Standaard staat er geen witte rand om artikelafbeeldingen in je artikeloverzicht. Wil je dat wel, dan bepaal je hier hoe dik die rand is. Overig Subpagina navigatie Slideshow achtergrondkleur Slideshow bladerknopjes Kleuren van de subpagina navigatie: Deze (tekst)kleur wordt gebruikt voor je subpagina-blokken als deze getoond worden in je winkel. Of dat zo is zie je terug bij Vormgeving/Pagina instellingen. Deze kleur kan kort zichtbaar zijn tussen de afbeeldingen door. Gebruik dus een neutrale kleur. Slideshow bladerknopjes: kies hier een passende kleur voor de knopjes die op je slideshow-afbeeldingen getoond worden. Bestelproces betaalstappen tonen Betaalstappen tonen: de knoppen 1 t/m 4 van het bestelproces zet je hier aan of uit. Hint: onze voorkeur heeft aan! Zo weet je bezoeker precies hoeveel stappen hij nog te gaan heeft.

3 Koppen Koppen tonen Kleuren Achtergrondafbeelding Gebruik je kolommen in je indeling? Dan zorgt deze functie voor een kopje boven elk element in die kolommen. Een titel zoals gastenboek of nieuwsbrief verdwijnt dus wanneer je dit schuifje uitzet. Stel hier de kleuren in voor bovengenoemde koppen. Upload hier een achtergrondafbeelding. Deze wordt getoond achter de koppen van je indeling. Blokken Achtergrondkleur Kleur van alle randen Afgeronde hoeken De hoofdkolom bestaat uit de welbekende 1100 pixels breedte waarin het allemaal gebeurt. De zijkolommen staan links en rechts van de hoofdkolom. Dit gedeelte valt weg op mobiele apparaten. Kleur van alle randen: deze functie zet een randje om de verschillende blokken, en om alle artikelen. Zorg voor wat minder scherpe hoeken met deze instelling. Bekijk het voorbeeld en stel eventueel het aantal pixels nog ietsjes bij. Normale teksten Lettertype Kleur teksten Kies hier uit een flinke collectie (Google)fonts. Dit font wordt gebruikt voor alle normale teksten zoals artikel- en paginaomschrijvingen. Per pagina/artikel kun je dit nog aanpassen via de editor. Stel hier in hoe groot de letters standaard moeten worden. En uiteraard welke kleur ze moeten krijgen.

4 Kleur van links Prijzen prijs artikelnaam Eventuele links in je tekst geef je hiermee een afwijkende kleur. De prijzen van je artikelen krijgen de kleur die je hier kiest, voor afgeprijsde artikelen kun je een afwijkende kleur invullen. De instelling geldt voor zowel artikeloverzichten als detailpagina s. Mag de prijs wel wat extra in het oog springen? Pas dan hier de grootte aan. Met deze instelling pas je de grootte van de namen in je artikeloverzichten aan. Kopteksten Lettertype Kleur koppen Bepaal hier welk font je wilt gebruiken voor alle koppen in je shop. Denk aan paginanamen, artikelnamen en kopjes in de indeling. Hier vind je de opties voor de lettergrootte van je koppen. Probeer gerust wat opties uit om uit te vinden welke het best bij jouw opmaak past. Of je hier dezelfde kleur gebruikt als bij gewone teksten bepaal je natuurlijk helemaal zelf. Knoppen Achtergrondkleur Tekstkleur op knoppen Achtergrondkleur koop-knop Niet beschikbare knoppen Inmiddels heb je vast en zeker een mooi kleurenpallet bepaald, bepaal hier welk van de kleuren je graag op de knoppen hebt. Zorg voor voldoende contrast tussen achtergrondkleur en tekstkleur zodat het goed leesbaar is. Kies voor deze knop een kleur waarop je klanten graag willen klikken en die complementair is aan het kleurenpallet van je shop! Dit zijn knoppen waar je klant niet op kan klikken, zoals stap 3 en 4 van het bestelproces wanneer je klant stap 1 en 2 nog niet heeft afgerond.

5 Formulier elementen Kleur randen invulvelden Deze velden kom je bijvoorbeeld tegen in het bestelproces en op je contactformulier. Kleur van foutmeldingen Kleur van infomeldingen Gebruik hier bij voorkeur een opvallende waarschuwende kleur, zoals rood. Kies een kleur uit je huisstijl die afsteekt tegen je voornaamste kleur. Kleuren en gedrag Pagina s in het menu Hier bepaal je welke kleuren je navigatiemenu krijgt. Actieve status en hover De pagina die open staat (actief) en de pagina die je muis aanwijst (hover) krijgen deze kleuren. Standaard opmaak Pijltje onderliggende pagina s Sticky navigatie Menu bullet Bepaal hier of je alle pagina s in het menu onderstreept en/of schuingedrukt wilt tonen. Je kunt van deze instelling afwijken door in het submenu bij Inhoud/Pagina s voor Menustijl te kiezen Als deze functie aan staat wordt er pijltje getoond bij elke hoofdpagina die 1 of meerdere subpagina s heeft. Deze knop is alleen te zien wanneer je navigatie in een balk staat. Zet je de knop aan dan blijft je navigatiebalk plakken (en dus zichtbaar) wanneer je bezoeker naar beneden scrollt op een pagina. Handig! De afbeelding die je hier toevoegt (max. 16x16 pixels) wordt gebruikt bij opsommingen in plaats van de welbekende zwarte stip.

6 Tekst Lettertype navigatie Eventueel kun je hier een alternatief lettertype kiezen voor je navigatie. Automatisch gebruiken we hier de grootte die je koos voor normale teksten. Aanpassen kan door een ander aantal pixels uit het rijtje te kiezen. Pagina header Logo in de header Uitlijning logo Header achtergrondafbeelding Achtergrondkleuren Upload hier je bestaande logo, of maak een nieuwe via de Logomaker. Het bestand mag maximaal 1100 pixels breed zijn en maximaal 400 pixels hoog. Kies hier of je het logo links, in het midden, of rechts wilt tonen. Deze achtergrond van max x 400 pixels wordt achter je logo getoond. Deze mag je natuurlijk ook weglaten. Bijvoorbeeld omdat je er een kleur achter wilt tonen. Stel hier een achtergrondkleur in. Deze tekstkleur gebruiken we voor je winkelnaam indien er geen logoafbeelding is geüpload. Topbalk Kleuren topbalk Breedte topbalk Uitlijning van de blokken Bepaal hier de kleuren van de dunne balk boven je headerafbeelding. Kies hier of je balk over de volledige breedte moet doorlopen. De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 2 rechts).

7 Headerbalk Kleuren headerbalk Breedte headerbalk Uitlijning van de blokken Headerbalk achtergrond Bepaal hier de kleur van de dunne balk onder je headerafbeelding Kies hier of je balk over de volledige breedte moet doorlopen De elementen in je balk kunnen in het midden (gecentreerd) of aan de buitenzijden worden gezet (1 links en 1 rechts). Wil je een afbeelding, patroon of kleur achter je headerbalk tonen? Upload hier dan een afbeelding van maximaal 50 pixels hoog. Footer Kleuren Kleur van links koppen Deze kleuren worden alleen gebruikt voor de footer. Hoe je de kleuren invult weet je inmiddels J Als je een footer gebruikt staan er ongetwijfeld links in, hiermee geef je ze een ander kleurtje dan de links in je normale teksten. Automatisch gebruiken we hier de grootte die je koos voor normale teksten En hier de grootte die je koos voor koppen. Aanpassen kan door een ander aantal pixels uit het rijtje te kiezen.