Hoe u de algemene stijl van uw winkel instelt

Hallo en welkom in uw GoodBarber back office. Vandaag gaat het over een krachtig hulpmiddel voor het design van uw app: het menu Algemene stijl. Daarmee stuurt u het algemene design van uw app vanuit één menu. De hier gekozen kleuren, lettertypes en effecten gelden voor elke sectie van uw app. Let op: elke wijziging in dit menu werkt door in alle secties. Klik in het menu Content en Design > Design > Algemeen design op Algemene stijl.

Eerst kiest u een kleurenthema. Een kleurenthema is een combinatie van kleuren die perfect bij elkaar passen. De Algemene stijl bevat een bibliotheek met kleurenthema's. Klik op Bewerken om ze te doorbladeren. Zoals u ziet, heb ik veel keuze. Wil ik liever mijn huidige thema aanpassen, dan klik ik op Bewerken, ga ik naar het einde van de pagina, klik ik op Een kleurenthema maken en kies ik mijn kleuren.

Verder met de typografie. Voor de weergave van tekst in de app is er een hiërarchie. 8 niveaus tonen titels, ondertitels, alinea's en lopende tekst. Ik bepaal de tekengrootte en het lettertype voor elk niveau. Afhankelijk van het lettertype kan ik ook de snede kiezen. Nu de knoppen. Voor de secties van uw app die tot een actie uitnodigen, kies ik de vorm van de knop.

Met een klik hier zie ik het resultaat. Ook bij de knoppen zijn er meerdere niveaus. Hun design hangt af van het kleurenthema van uw app; om alles te laten kloppen zijn er per thema meerdere varianten. Dit zijn de drie designsoorten per niveau: Niveau 1 => gekleurde achtergrond, geen omlijning. Niveau 2 => doorzichtige achtergrond, omlijning en tekst in kleur. Niveau 3 => doorzichtige achtergrond, geen omlijning

Nu de effecten bij het zweven over afbeeldingen. Dat bestaat alleen in de PWA. En ten slotte de overige elementen, zoals het terugpijltje dat tijdens het navigeren in uw winkel in de header verschijnt. Ik sla de wijziging op. Denk eraan: al die wijzigingen overschrijven het huidige design van uw winkel, ook dat van de losgekoppelde secties.

Laten we kijken. Ja, ik vind mijn winkel er echt goed uitzien.

Tot bij een volgende tutorial!