Hopp til hovedinnhold

Utseende

Utseende-siden lar deg tilpasse det overordnede utseendet og følelsen av kirkens nettsted. Fra farger og skrifter til avstand og egendefinert CSS kan du styre alle visuelle aspekter av nettstedet ditt fra ett sted.

Før du begynner

  • Fullfør startoppsett for nettstedet ditt
  • Ha kirkens logo klar i PNG-format med transparent bakgrunn og 4:1 sideforhold
  • Kjenn kirkens merkbarfarger (hex-verdier) hvis du har en eksisterende stilguide

Tilgang til utseendeinnstillinger​

  1. I B1 Admin klikker du Nettsted i venstre meny.
  2. Klikk Utseende-fanen øverst på nettstedsidelene.
  3. Siden Nettstedsstiler laster med en live-forhåndsvisning av nettstedet ditt på venstre og innstillinger for stil på høyre.

Fargepalet​

  1. Klikk Fargepalet i panelet for stilinnstillinger.
  2. Du vil se Basefarger (lette, aksent- og mørkefargelegger) og semantiske farger (primær, sekundær, suksess, advarsel og feil).
  3. Klikk på en fargeflagg for å åpne fargesamleren. Dra valgeren eller skriv inn en hex-verdi for å velge fargen din.
  4. Fargekombinasjonsforhåndsvisningen viser hvordan de valgte fargene dine fungerer sammen.
  5. Bruk foreslåtte paletter for raskt å bruke et forhåndsutformet fargeskjema.
  6. Klikk Lagre når du er fornøyd.

Typografi​

  1. Klikk Innstillinger for typografi i panelet for stilinnstillinger.
  2. Klikk Velg en skrift for å åpne skriftleseren. Du kan søke etter navn eller bla etter kategorier som Serif, Sans Serif, Display, Handskrift og Monospace.
  3. Angi skrifter for både overskrifter og brødtekst.
  4. Klikk Typografi-skala for å justere størrelseshierarkiet for overskrift 1 til 4. Bruk multiplikator og basstorstørrelsesfelter for å finjustere.
  5. Klikk Lagre for å bruke skriftvalg.

Avstand​

  1. Klikk Avstandsskala i panelet for stilinnstillinger.
  2. Juster avstandsverdier for ekstra småt til ekstra stort. Praktiske eksempler viser hvordan hver verdi påvirker layouten.
  3. Klikk Lagre avstand for å bruke verdiene på hele nettstedet.

Logo og merkvaringstil​

  1. Klikk Logo i panelet for stilinnstillinger.
  2. Last opp Logo for lys bakgrunn og Logo for mørk bakgrunn. Bruk bilder med transparent bakgrunn og 4:1 sideforhold for best resultater.
  3. Last opp et bilde for sosialt media for linkvarsler og et favicon for ikonet for nettleserfanen.
Tips

For best resultater bruker du et logo med transparent bakgrunn i PNG-format. Dette sikrer at det ser flott ut på både lyse og mørke bakgrunner på tvers av nettstedet og mobilappen.

Tilpass navigasjonsfeltstolefargene dine for både solid og transparent moduser:

  1. Scroll til Navigasjonsstiler-seksjonen
  2. Klikk Rediger navigasjonsstiler
  3. Konfigurer farger for solid navigasjon (med bakgrunn) og transparent navigasjon (overlagsmodus)
  4. Klikk Lagre for å bruke navigasjonsfargene

For detaljerte instruksjoner, se navigasjonsstiler.

Egendefinert CSS og JavaScript​

  1. Klikk CSS og Javascript i panelet for stilinnstillinger.
  2. Legg til Egendefinert CSS for å overstyre standardstiler for avansert tilpassing.
  3. Legg til Egendefinert HTML for sporings-koder eller andre skript.
  4. Bruk almindelige JavaScript-eksempler-seksjonen for fragmenter som Google Analytics-integrering.
Advarsel

Egendefinert CSS er kraftig, men kan bryte nettstedsoppsettet hvis det brukes feil. De fleste kirker kan oppnå utseendet de ønsker ved hjelp av de innebygde farger-, skrift- og avstandskontrollene. Bruk bare egendefinert CSS hvis du er komfortabel med webutvikling.

Stiletemaer​

Hvis du vil ha et raskt utgangspunkt, tilbyr foreslåtte paletter i seksjonalen for fargepalet ferdigbygde temaer som angir koordinerte farger på ett klikk. Du kan alltid finjustere individuelle innstillinger etter å ha brukt et tema.

Neste trinn​