Sådan indstiller du den globale stil i din butik

Hej og velkommen til dit GoodBarber-backoffice. I dag gennemgår vi et stærkt værktøj til design af din app: den globale stilmenu. Den globale stil giver dig mulighed for at styre det generelle design af din app fra en enkelt menu. Farver, skrifttyper og effekter, der vælges i denne menu, anvendes på alle dele af din app. Men vær forsigtig, hver ændring, der foretages i denne menu, vil blive anvendt på alle dele af din app. I menuen Indhold og design > Design > Generelt design skal du klikke på Global stil.

Det første, du skal gøre, er at vælge et farvetema. Et farvetema er en kombination af farver, der harmonerer perfekt. Den globale stil tilbyder et bibliotek med farvetemaer. Klik på rediger for at gennemse biblioteket. Som du kan se, har jeg mange valgmuligheder. Hvis jeg foretrækker at ændre mit egentlige tema, skal jeg klikke på edit, rulle til bunden af siden og klikke på create a color theme og derefter vælge dine farver.

Lad os nu gå videre til telefonerne. Der er et hierarki for visning af tekst i appen. 8 niveauer bruges til at vise titler, undertekster, afsnit og tekst. Jeg definerer skriftstørrelsen og skrifttypen for hvert niveau. Afhængigt af den valgte skrifttype kan jeg også vælge indstillingen. Nu til knapperne. For de dele af din app, der inviterer brugerne til at udføre en handling, vælger jeg formen på den knap, jeg vil anvende.

Jeg kan se en forhåndsvisning af resultatet ved at klikke her. Der er flere niveauer af hierarki for knapperne i din app. Knappens design afhænger af farvetemaet i din app. For at respektere harmonien er der flere variationer til rådighed for hvert tema. Her er de tre forskellige typer design for hvert niveau i hierarkiet:
Niveau 1 => farvet baggrund på knappen uden kontur
Niveau 2 => gennemsigtig baggrund af knappens omrids og tekst i farve
Niveau 3 => gennemsigtig baggrund af knappen uden kontur

Nu er der hover-effekter på billeder. Dette er kun tilgængeligt på PWA. Endelig de ekstra elementer som f.eks. tilbage-ikonet, der vises i headeren, mens du navigerer i din butik. Jeg gemmer ændringen. Glem ikke, at alle disse ændringer vil tilsidesætte det faktiske design af din butik, herunder eventuelle afkoblede sektioner.

Lad os se, ja, jeg kan virkelig godt lide udseendet af min butik.

Vi ses til en anden tutorial!