Naar hoofdinhoud gaan

Weergave

Op de pagina Weergave kunt u het algehele uiterlijk en gevoel van uw kerkwebsite aanpassen. Van kleuren en lettertypen tot afstanden en aangepaste CSS, u kunt elk visueel aspect van uw site vanaf één plaats beheren.

Voordat u begint

  • Voltooi Initiële installatie voor uw website
  • Zorg dat u uw kerklogo in PNG-indeling met transparante achtergrond en verhouding van 4:1 gereed hebt
  • Ken de merkkleurenvan uw kerk (hexwaarden) als u een bestaande stijlhandleiding hebt

Weergave-instellingen openen​

  1. Klik in B1 Admin op Website in het linkermenu.
  2. Klik op het tabblad Weergave bovenaan de weergave Website Pages.
  3. De pagina Site Styles laadt met een live preview van uw website aan de linkerkant en opties voor Style Settings aan de rechterkant.

Kleurenpalette​

  1. Klik op Color Palette in het deelvenster Style Settings.
  2. U ziet Base Colors (lichte, accent- en donkere tinten) en Semantic Colors (Primary, Secondary, Success, Warning en Error).
  3. Klik op een kleurstaal om de kleurkiezer te openen. Sleep de selector of voer een hexwaarde in om uw kleur te kiezen.
  4. Het Color Combinations Preview toont hoe uw geselecteerde kleuren samenwerken.
  5. Gebruik Suggested Palettes om snel een vooraf ontworpen kleurenschema toe te passen.
  6. Klik op Opslaan als u tevreden bent.

Typografie​

  1. Klik op Typography Settings in het deelvenster Style Settings.
  2. Klik op Select a Font om de lettertypebrowser te openen. U kunt op naam zoeken of categorieën bladeren, zoals Serif, Sans Serif, Display, Handwriting en Monospace.
  3. Stel lettertypen voor zowel koppen als hoofdtekst in.
  4. Klik op Typography Scale om de groothiërarchieh voor kop 1 tot 4 aan te passen. Gebruik de vermenigvuldiger en basisgroottevelden om perfect in te stellen.
  5. Klik op Opslaan om uw lettertypekeuzes toe te passen.

Afstand​

  1. Klik op Spacing Scale in het deelvenster Style Settings.
  2. Pas afstandswaarden aan voor Extra Small tot Extra Large. Praktische voorbeelden tonen hoe elke waarde de indeling beïnvloedt.
  3. Klik op Save Spacing om de waarden in uw hele site toe te passen.

Logo en branding​

  1. Klik op Logo in het deelvenster Style Settings.
  2. Upload uw Light Background Logo en Dark Background Logo. Gebruik afbeeldingen met een transparante achtergrond en een verhouding van 4:1 voor de beste resultaten.
  3. Upload een Social Media Image voor linkvoorbeelden en een Favicon voor het browsertabbladpictogram.
tip

Voor de beste resultaten gebruikt u een logo met een transparante achtergrond in PNG-indeling. Dit zorgt ervoor dat het op zowel lichte als donkere achtergronden er geweldig uitziet in uw website en mobiele app.

Aangepaste CSS en JavaScript​

  1. Klik op CSS and Javascript in het deelvenster Style Settings.
  2. Voeg Custom CSS toe om standaardstijlen voor geavanceerde aanpassing te overschrijven.
  3. Voeg Custom HTML toe voor trackingcodes of andere scripts.
  4. Gebruik de sectie Common Javascript Examples voor codefragmenten, zoals Google Analytics-integratie.
waarschuwing

Aangepaste CSS is krachtig, maar kan uw site-indeling breken als deze onjuist wordt gebruikt. De meeste kerken kunnen het gewenste uiterlijk bereiken met behulp van de ingebouwde kleur-, lettertype- en afstandsbedieningselementen. Gebruik aangepaste CSS alleen als u vertrouwd bent met webontwikkeling.

Stijlthema's​

Als u een snelle startpunt wilt, bieden de Suggested Palettes in de sectie Color Palette vooraf ingebouwde thema's die gecoördineerde kleuren met één klik instellen. U kunt altijd afzonderlijke instellingen na het toepassen van een thema verfijnen.

Volgende stappen​