Pereiti prie pagrindiniam turinį

Navigacijos stiliai

Pritaikykite savo bažnyčios svetainės navigacijos juostos spalvas, kad jos atitiktų jūsų prekės ženklą. Galite nustatyti spalvas tiek vientisiems fonams, tiek permatomoms perdangoms, todėl visiškai kontroliuosite, kaip navigacija atrodo skirtinguose puslapiuose.

Prieš pradedant

  • Jums reikia leidimo tvarkyti savo bažnyčios svetainę. Išsamesnės informacijos rasite skyriuje Vaidmenys ir leidimai.
  • Turėkite paruoštas savo prekės ženklo spalvas, įskaitant šešioliktainius spalvų kodus (pvz., #03A9F4).
  • Supraskite skirtumą tarp vientisos ir permatomos navigacijos stilių jūsų svetainėje.

Jūsų svetainės navigacija gali atrodyti dviem skirtingais stiliais, priklausomai nuo puslapio:

  • Vientisa navigacija -- navigacijos juosta su fono spalva, paprastai naudojama turinio puslapiuose
  • Permatoma navigacija -- navigacija, uždengianti puslapio turinį, paprastai naudojama puslapiuose su antraštės paveikslėliais arba viso ekrano fonais

Abiejų režimų spalvas galite keisti nepriklausomai.

  1. B1 Admin programoje atidarykite Šuolio meniu (paieškos juosta viršuje kairėje) ir išskleiskite Svetainė
  2. Spustelėkite Išvaizda
  3. Sąraše Stiliaus nustatymai spustelėkite Navigacija

Navigacijos stiliaus redaktoriuje yra dvi kortelės: Antraštė (vientisa) ir Antraštė virš paveikslėlio (permatoma).

Vientisos navigacijos konfigūravimas​

Vientisa navigacija rodoma su fono spalva už navigacijos juostos. Šie nustatymai yra kortelėje Antraštė (vientisa). Galite pritaikyti:

Fono spalva​

  1. Įjunkite jungiklį Perrašyti prie Fono spalvos
  2. Spustelėkite spalvų parinkiklį
  3. Pasirinkite norimą fono spalvą
  4. Numatytoji spalva yra balta (#FFFFFF)

Nuorodų spalva​

  1. Įjunkite jungiklį Perrašyti prie Nuorodų spalvos
  2. Pasirinkite navigacijos nuorodų teksto spalvą
  3. Tai veikia nuorodas įprastoje būsenoje
  4. Numatytoji spalva yra tamsiai pilka (#555555)

Nuorodos užvedimo spalva​

  1. Įjunkite jungiklį Perrašyti prie Nuorodos užvedimo spalvos
  2. Pasirinkite spalvą, į kurią nuorodos keisis, kai vartotojai užveda pelės žymeklį
  3. Tai suteikia vizualinį grįžtamąjį ryšį apie spustelėjamas nuorodas
  4. Numatytoji spalva yra šviesiai mėlyna (#03A9F4)

Aktyvi spalva​

  1. Įjunkite jungiklį Perrašyti prie Aktyvios nuorodos spalvos
  2. Pasirinkite dabartinio puslapio nuorodos spalvą
  3. Tai padeda vartotojams suprasti, kuriame puslapyje jie yra
  4. Numatytoji spalva yra šviesiai mėlyna (#03A9F4)

Permatomos navigacijos konfigūravimas​

Permatoma navigacija uždengia puslapio turinį be fono. Šie nustatymai yra kortelėje Antraštė virš paveikslėlio (permatoma). Galite pritaikyti:

Nuorodų spalva​

  1. Įjunkite jungiklį Perrašyti prie Nuorodų spalvos
  2. Pasirinkite spalvą, kuri gerai kontrastuoja su jūsų puslapio fonu
  3. Tamsių fonų atveju dažnai geriausiai tinka balta arba šviesios spalvos
  4. Numatytoji spalva yra tamsiai pilka (#555555)

Nuorodos užvedimo spalva​

  1. Įjunkite jungiklį Perrašyti prie Nuorodos užvedimo spalvos
  2. Pasirinkite užvedimo būsenos spalvą
  3. Įsitikinkite, kad ji matoma ant jūsų puslapio fono
  4. Numatytoji spalva yra šviesiai mėlyna (#03A9F4)

Aktyvi spalva​

  1. Įjunkite jungiklį Perrašyti prie Aktyvios nuorodos spalvos
  2. Pasirinkite aktyvaus puslapio indikatoriaus spalvą
  3. Ji turėtų išsiskirti, tuo pat metu derėdama su jūsų dizainu
  4. Numatytoji spalva yra šviesiai mėlyna (#03A9F4)
info

Permatoma navigacija neturi fono spalvos nustatymo, nes ji tiesiogiai uždengia puslapio turinį.

Pakeitimų išsaugojimas​

  1. Sukonfigūravę spalvas, spustelėkite Išsaugoti navigaciją
  2. Jūsų pakeitimai iš karto pritaikomi jūsų tiesioginėje svetainėje
  3. Apsilankykite savo svetainėje, kad pamatytumėte navigaciją abiejuose režimuose

Grąžinimas į numatytuosius nustatymus​

Jei norite grįžti prie numatytųjų spalvų:

  1. Išjunkite jungiklius Perrašyti prie visų pritaikytų spalvų
  2. Spustelėkite Išsaugoti navigaciją
  3. Navigacija grįžta prie numatytosios spalvų schemos

Arba spustelėkite Atšaukti, kad atmestumėte visus pakeitimus neišsaugoję.

Geriausia praktika​

Spalvų kontrastas​

  • Skaitomumas -- įsitikinkite, kad nuorodų spalvos gerai kontrastuoja su fonu
  • WCAG atitiktis -- siekite bent 4,5:1 kontrasto santykio pagal prieinamumo reikalavimus
  • Išbandykite abu režimus -- peržiūrėkite savo svetainę su vientisa ir permatoma navigacija

Prekės ženklo nuoseklumas​

  • Naudokite savo prekės ženklo spalvas -- derinkite jas su savo logotipu ir svetainės tema
  • Riboti paletę -- laikykitės 2-3 spalvų, kad išlaikytumėte nuoseklų vaizdą
  • Atsižvelkite į savo paveikslėlius -- jei naudojate permatomą navigaciją, išbandykite ją su įprastais puslapių fonais

Užvedimo ir aktyvios būsenos​

  • Aiškus grįžtamasis ryšys -- užvedimo būsenos turi akivaizdžiai skirtis nuo įprastų nuorodų
  • Atskirkite aktyvius puslapius -- naudokite išskirtinę spalvą, kad vartotojai žinotų, kur yra
  • Sklandūs perėjimai -- sistema automatiškai animuoja spalvų pakeitimus

Trikčių šalinimas​

Spalvos neatrodo teisingai​

  • Išvalykite talpyklą -- naršyklės talpykla gali rodyti senas spalvas
  • Patikrinkite šešioliktainius kodus -- įsitikinkite, kad įvedėte teisingus šešioliktainius spalvų kodus
  • Išbandykite skirtinguose fonuose -- spalvos gali atrodyti kitaip, priklausomai nuo puslapio
  • Permatomas režimas -- jei naudojate permatomą navigaciją virš šviesių paveikslėlių, tamsus tekstas gali būti sunkiai įskaitomas
  • Sprendimas -- pakeiskite nuorodų spalvas arba naudokite tamsesnius puslapių fonus
  • Alternatyva -- pridėkite subtilų šešėlį arba fono perdangą navigacijos srityje

Techninė informacija​

Navigacijos stiliai saugomi JSON formatu ir taikomi naudojant CSS kintamuosius:

  • Pakeitimai įsigalioja iš karto, nereikia iš naujo kurti svetainės
  • Spalvos taikomos visiems navigacijos elementams
  • Perrašymai yra neprivalomi; nenustatytos spalvos naudoja temos numatytąsias reikšmes

Susiję straipsniai​