Hopp til hovedinnhold

Utseende

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

Før du begynner

  • Fullfør Førstegangsoppsett for nettstedet ditt
  • Ha kirkelogoen din klar i PNG-format med gjennomsiktig bakgrunn og et sideforhold på 4:1
  • Kjenn til kirkens merkevarefarger (heksverdier) hvis du har en eksisterende stilguide

Åpne utseendeinnstillinger​

  1. I B1 Admin klikker du på Nettsted i venstremenyen.
  2. Klikk på Utseende-fanen øverst i visningen Nettstedsider.
  3. Siden Stilinnstillinger for nettsted laster inn med en live forhåndsvisning av nettstedet ditt til venstre og stilinnstillinger til høyre.

Fargepalett​

  1. Klikk på Fargepalett i panelet for stilinnstillinger.
  2. Du vil se Basisfarger (lyse, aksent- og mørke nyanser) og Semantiske farger (Primær, Sekundær, Suksess, Advarsel og Feil).
  3. Klikk på en hvilken som helst fargeprøve for å åpne fargevelgeren. Dra velgeren eller skriv inn en heksverdi for å velge fargen din.
  4. Forhåndsvisning av fargekombinasjoner viser hvordan de valgte fargene dine fungerer sammen.
  5. Bruk Foreslåtte paletter for raskt å bruke et ferdigdesignet fargeskjema.
  6. Klikk Lagre når du er fornøyd.

Typografi​

  1. Klikk på Typografiinnstillinger i panelet for stilinnstillinger.
  2. Klikk på Velg en skrifttype for å åpne skriftbibliotekvelgeren. Du kan søke etter navn eller bla gjennom kategorier som Serif, Grotesk (Sans Serif), Display, Håndskrift og Fastbredde (Monospace).
  3. Angi skrifttyper for både overskrifter og brødtekst.
  4. Klikk på Typografiskala for å justere størrelseshierarkiet for Overskrift 1 til Overskrift 4. Bruk skalamultiplikatoren og feltene for grunnstørrelse for å finjustere.
  5. Klikk Lagre for å ta i bruk skriftvalgene dine.

Avstand​

  1. Klikk på Avstandsskala i panelet for stilinnstillinger.
  2. Juster avstandsverdier fra Ekstra liten til Ekstra stor. Praktiske eksempler viser hvordan hver verdi påvirker oppsettet.
  3. Klikk Lagre avstand for å ta i bruk verdiene på tvers av hele nettstedet ditt.

Logo og merkevareprofil​

  1. Klikk på Logo i panelet for stilinnstillinger.
  2. Last opp Logo for lys bakgrunn og Logo for mørk bakgrunn. Bruk bilder med gjennomsiktig bakgrunn og et sideforhold på 4:1 for best resultat.
  3. Last opp et bilde for sosiale medier for lenkeforhåndsvisninger og et favicon for ikonet i nettleserfanen.
Tips

For best resultat bør du bruke en logo med gjennomsiktig bakgrunn i PNG-format. Dette sikrer at den ser bra ut på både lyse og mørke bakgrunner på tvers av nettstedet ditt og mobilappen.

Tilpass fargene til nettstedets navigasjonslinje for både solide og gjennomsiktige moduser:

  1. Bla ned til seksjonen Navigasjonsstiler
  2. Klikk Rediger navigasjonsstiler
  3. Konfigurer farger for solid navigasjon (med bakgrunn) og gjennomsiktig navigasjon (overleggsmodus)
  4. Klikk Lagre for å ta i bruk navigasjonsfargene dine

For detaljerte instruksjoner, se Navigasjonsstiler.

Nettstedwidgeter​

Nettstedwidgeter vises på hver side på nettstedet ditt, flytende over sideinnholdet:

  • Kunngjøringsbanner -- En avvisbar bjelke øverst på nettstedet for tidssensitive meldinger, som et kommende arrangement eller en endring i gudstjenestetider.
  • Launcher -- En flytende knapp som åpner en hurtigmeny, for eksempel lenker til å gi, sjekke inn eller se bulletinen.
  1. Klikk på Nettstedwidgeter i panelet for stilinnstillinger.
  2. Slå på widgetene du vil ha, og konfigurer tekst, lenker og farger for dem.
  3. Klikk Lagre.

Analyse​

Legg til din Google Analytics 4-målings-ID i panelet for stilinnstillinger for å spore besøkstrafikk på nettstedet ditt.

Egendefinert CSS og JavaScript​

  1. Klikk på CSS og JavaScript i panelet for stilinnstillinger.
  2. Legg til egendefinert CSS for å overstyre standardstiler for avansert tilpasning.
  3. Legg til egendefinert HTML for sporingskoder eller andre skript.
  4. Bruk seksjonen Vanlige JavaScript-eksempler for utdrag som Google Analytics-integrasjon.
Advarsel

Egendefinert CSS er kraftig, men kan ødelegge nettstedets oppsett hvis den brukes feil. De fleste kirker kan oppnå utseendet de ønsker med de innebygde kontrollene for farge, skrift og avstand. Bruk kun egendefinert CSS hvis du er komfortabel med webutvikling.

Stiltemaer​

Hvis du vil ha et raskt utgangspunkt, tilbyr Foreslåtte paletter i Fargepalett-seksjonen ferdigbygde temaer som setter koordinerte farger med ett klikk. Du kan alltid finjustere individuelle innstillinger etter at du har brukt et tema.

Neste steg​

  • Administrere sider -- Bygg og organiser nettstedssidene dine
  • Filer -- Last opp medieressurser for nettstedet ditt