De stijlen en functies van de Brine-sjabloonfamilie.
Met sjablonen uit de Brine-familie kun je een professionele webaanwezigheid creëren voor elk merk of bedrijf. Pas de headers, footer, ingesprongen content, en mobiele stijlen aan om je site te laten opvallen. Voeg schermbrede banners toe aan elke pagina, of stapel ze in de index. Optioneel parallax scrollen beweegt banners langzamer dan de inhoud van de pagina, waardoor een illusie van diepgang en onderdompeling ontstaat.
Deze handleiding beschrijft de functies en ontwerpmogelijkheden voor de Brine-familie. Bekijk een lijst van Brine's sjablonen.
Geef je site een eigen stijl in het paneel sitestijlen. In deze handleiding zijn sitestijlen en het gedeelte waarin ze verschijnen in het paneel sitestijlen vetgedrukt.
Ondersteunde pagina's
Brine ondersteunt de volgende paginatypen:
- Albumpagina's
- Blogpagina's - Standaard raster/lijst
- Voorpagina's
- Evenementenpagina's
- Galeriepagina's - standaard
- Indexpagina's - Gestapelde pagina's
- Lay-outpagina's
- Winkelpagina's - Geavanceerd abonnement
Headers
Bezoekers gebruiken de header bovenaan om door je site te navigeren. In Brine is de header verdeeld in boven- en ondergedeelten.
- Voeg elementen zoals de sitetitel of logo en navigatielinks toe aan de bovenste en onderste headers in het Header: lay-out gedeelte van de sitestijlen.
- De onderste header ondersteunt een achtergrondafbeelding en een introductiegebied waar je je eigen content kunt toevoegen.
Stijl de headers
Style de bovenste header met deze Header: top-aanpassingen:
- Stel de hoogte in met opvulling.
- Stel de kleur in met Achtergrond.
De onderste header toont paginabanners als achtergrondafbeeldingen of video's. Als er geen banner is, is de achtergrondkleur hetzelfde als de pagina (ingesteld met de tweak Kleur onder Hoofd).
Om de hoogte van de onderste header te wijzigen:
- Alle pagina's – Wijzig de opvulling onder Header: bottom en de Intro-opvulling tweak onder Main.
- Individuele pagina's - Voeg hoogte toe door extra regeleinden toe te voegen aan het introductiegebied.
- Indexpagina's - Wijzig de hoogte van het bovenste indexgedeelte.
header-elementen toevoegen en stijlen
- Sitetitel of logo (“branding”)
- Slogan
- Navigatielinks
- Ingebouwde socialemediapictogrammen
- Zoekbalk
- Winkelwagentje
- Inloggen/hyperlink naar mijn account
Kies waar ze worden weergegeven of verberg ze in het gedeelte Header: lay-out van sitestijlen. Kies bijvoorbeeld Brandingpositie: Middenboven om de titel of het logo van je site in het midden van de bovenste header te plaatsen.
Stijl ze met de aanpassingen in hun respectieve headergedeelten. Ga bijvoorbeeld naar Header: primaire navigatie om het lettertype en de kleur van de links te kiezen.
- Voor elementen in de onderste header, stel hun (overlay) kleuren in zodat ze zichtbaar zijn boven banners.
- Kies of elementen in hetzelfde gebied (bijvoorbeeld middenonder) al dan niet stapelen met de lay-out aanpassingen in header: boven en header: onder.
- Stel hun aparte mobiele stijlen in, zodat ze er op mobiele apparaten goed uitzien.
Meer hulp bij headers
Houd je tips in gedachten:
- Plaats voor de beste resultaten elk element in een ander gedeelte van de header. Elementen kunnen elkaar overlappen als er niet genoeg ruimte is.
- Sommige aanpassingen worden pas weergegeven als de elementen waarop ze betrekking hebben aan je site zijn toegevoegd.
- Als de bovenste header geen elementen heeft, verschijnt die niet.
- Ga voor meer tips naar Een siteheader bouwen.
Navigatielinks
Brine heeft drie navigatiegebieden.
Primaire navigatie en secundaire navigatielinks:
- Kan worden weergegeven in de boven- of onderheader.
- Zijn gestyled met de stijlaanpassingen Header: primaire navigatie en Header: secundaire navigatie. Kies bijvoorbeeld Stijl: knop om primaire of secundaire navigatie als knoppen te stylen.
Footernavigatielinks:
- Toon in de site-footer.
- Zijn vormgegeven met Voettekst: footernavigatie.
Banners
Banners creëren een visueel element dat de toon kan zetten voor je pagina. Voeg uitgelichte pagina-afbeeldingen en -video's toe om banners te maken.
In Brine: banners
- Weergave voor lay-outpagina's en collectiepagina's.
- Worden achtergronden voor de onderste header.
- Toon schermbreed, behalve bij de Design: constrained lay-out.
- Kan langzamer scrollen dan de rest van de pagina met parallax scrollen.
- Toon niet voor collectie-items (zoals blogposts, productelementen en individuele evenementen).
Je kunt meerdere banners stapelen in een index.
Stijlbanners
Gebruik deze opties om je banners te stijlen:
- Voeg een kleurfilter toe met de Overlay-kleuraanpassing onder Main: overlay.
- Voeg tekst en andere blokken toe, zoals knopblokken, in het introductiegebied.
- Om de hoogte te wijzigen, moet je het introductiegebied bewerken en regeleinden toevoegen.
- Kies of banners langzamer scrollen dan de rest van de pagina met de aanpassing Parallax inschakelen onder Site: loading.
- In sitestijlen beïnvloeden (overlay) -aanpassingen elementen die over bannerafbeeldingen worden weergegeven, zoals tekst en navigatielinks.
Bijsnijden en centreren
- Als parallax scrollen is ingeschakeld, gebruik dan de Parallax smart crop -tweak onder Site: loading om ervoor te zorgen dat banners zo min mogelijk worden bijgesneden.
- Als de afbeeldingen op een onverwachte manier worden afgesneden, bekijk dan onze tips voor het oplossen van problemen met bijsnijden.
- Kies hoe bannerafbeeldingen worden gecentreerd door hun focuspunten te wijzigen. Om ervoor te zorgen dat je afbeelding in beeld blijft tijdens het scrollen, plaats je het focuspunt dicht bij het midden van de afbeelding.
Meer hulp met je banners
Houd er rekening mee:
- De eerste afbeelding op een galeriepagina wordt automatisch de bannerafbeelding als die er niet is. Vervang of verwijder het in pagina-instellingen.
- Creëer het effect van een diavoorstellingspagina-banner met een index met een diavoorstellingsgalerij.
- Ga voor algemene hulp naar bannerafbeeldingen toevoegen.
Introductiegebieden
Het introductiegebied in de onderste header is een paginaspecifieke header die je kunt bewerken met tekst, afbeeldingen en andere inhoud. Dit is een geweldige manier om de bovenkant van afzonderlijke pagina's aan te passen.
Introductiegebieden worden weergegeven over pagina-banners en volgen de ingesprongen content. Ze zijn beschikbaar op alle pagina's behalve lay-outpagina's zonder banner, en indexpagina's.
Om de intro te bewerken:
- Zweef over het gebied boven de inhoud van de pagina, en klik op Bewerken.
- Voeg tekst en andere inhoud toe met blokken.
Het introductiegebied kan extra opvulling weergeven terwijl je je site bewerkt. Om te zien hoe de intro-afstanden eruitzien op je live site, sla je je wijzigingen op en bekijk je de pagina in de voorbeeldmodus.
Footer
Pas de footer van de hele site aan zodat bezoekers de antwoorden kunnen vinden die ze nodig hebben. Brine's footer bevat:
- Drie blokken die je kunt aanpassen met je eigen inhoud.
- Een gebied waar je bedrijfsinformatie wordt weergegeven.
- footernavigatie -links.
- Twee lay-outopties (gebruik de Lay-out -tweak onder footer).
Pas de lettertypen en kleuren aan met de opties voor de Footer. Om de footer te verbergen, schakelt u het selectievakje 'Footer weergeven' uit.
Lay-out: kolommen
Een blokkengebied, de bedrijfsinformatie en de navigatie worden horizontaal weergegeven, met een blokkengebied erboven en eronder. In de footer, uitklapmenu's en indexpagina's creëren geen uitklapmenu's, maar eerder kolommen. De titels van de indexpagina en de uitklapmenu's worden weergegeven als headers die geen hyperlinks zijn, met de subpaginalinks eronder.
Lay-out: gestapeld
De bedrijfsinformatie en navigatie worden verticaal gestapeld, met blokken erboven, tussen en onder. De titels van uitklapmenu's en indexpagina's worden niet weergegeven en de links naar subpagina's worden horizontaal weergegeven.
Blogpagina's
De Brine-sjabloonfamilie maakt gebruik van een standaard blogpagina met een raster-/lijstindeling. Ga voor meer informatie over de unieke functies en stijlopties van dit soort blogpagina, bezoek Standaard raster-/lijstblogpagina's in versie 7.0.
Indexpagina's
Brine-indexpagina's zetten de content van meerdere pagina's om in gestapelde gedeelten, zodat je verschillende afbeeldingen en informatie op één plek kunt benadrukken.
- Inhoudsgedeeltes zijn ideaal voor het weergeven van tekst, knoppen en andere blokken.
- In de galerie-indexgedeelten worden afbeeldingen weergegeven in een raster- of diavoorstellingsformaat.
Inhoudsgedeelten
Contentgedeeltes worden gemaakt van lay-outpagina's. Nadat je inhoudsgedeelten hebt toegevoegd, kun je ze aanpassen met blokken.
- Ingesprongen content (optioneel) creëert extra witruimte rond sommige blokken.
- Als het bovenste gedeelte een inhoudsgedeelte is, wordt het weergegeven in de onderste header.
Om de minimale hoogte voor sommige of alle gedeelten in te stellen, gebruik Apply minimum height onder Index: indexpagina:
- Stel dit alleen in voor het eerste gedeelte, pagina's met banners, alle pagina's of geen enkele pagina.
- Gebruik opvulling en opvulling (overlaypagina's) om de hoogte van alle gedeelten te wijzigen.
- Als de inhoud van de pagina langer is dan de minimale hoogte, rekt het gedeelte zich uit om de inhoud te passen, inclusief de opvulling.
- Om slechts de hoogte van één gedeelte te wijzigen, voeg je regeleinden toe aan de pagina-inhoud om deze langer te maken.
Voeg uitgelichte pagina-afbeeldingen toe om achtergrondbannerafbeeldingen of -video's aan gedeelten toe te voegen.
- Banners kunnen parallax scrollen bevatten.
- Als er geen banner is, is de achtergrondkleur hetzelfde als de pagina (ingesteld met de tweak Kleur onder Hoofd).
Galerie-indexgedeelten
Galerie-indexgedeelten worden aangemaakt op basis van galeriepagina's. Nadat je galerie-indexgedeelten hebt toegevoegd, kun je afbeeldingen en video's toevoegen.
In het index: galeriegedeelte van sitestijlen:
- Kies of alle galerie-indexgedeelten worden weergegeven als diavoorstelling of als raster met lay-out.
- Als je de spatiëring wilt wijzigen of schermbrede effecten wilt creëren, schakel je het selectievakje Spatiëring aan zijkanten toepassen uit en gebruik je de spatiëring -aanpassingen.
- Stel het Masker van afbeeldingen in met de beeldverhouding.
- Als het gedeelte bovenaan een galerie is, gebruik dan de Overlay-header op de eerste indexgalerie om te kiezen of deze achter de onderste header wordt weergegeven.
- Voeg een kleurfilter toe aan afbeeldingen met Afbeelding-overlay.
- De hoverstijl bepaalt wat er gebeurt als je over een afbeelding zweeft.
Galerie-indexgedeelten bieden geen parallax scrollen. Als parallax is ingeschakeld, lijkt het alsof ze over de langzamer bewegende contentgedeelten schuiven.
Video's in een galerijindexgedeelte tonen een uitgelichte afbeelding. Als er geen uitgelichte afbeelding bij je video is geüpload, wordt er in de index een zwart vak met een streep erdoor weergegeven. Om dit op te lossen, voeg een uitgelichte afbeelding toe aan je video.
Indexnavigatie
Om bezoekers te helpen uw index te verkennen:
- Gebruik de aanpassing index: scrollindicator om een pijl, lijn of tekst toe te voegen aan het eerste gedeelte om gebruikers aan te moedigen naar beneden te scrollen (alleen contentgedeelten).
- Voeg navigatiepunten of -lijnen toe met de Stijlaanpassing onder Index: navigatie. Door op een stip of lijn te klikken, komen ze bij het bijbehorende gedeelte.
Voeg ruimte toe onder je eerste gedeelte.
Als je site een rand heeft, kun je een bijpassende lijn van ruimte onder het eerste gedeelte toevoegen.
- Controleer de spiegelrand onder de eerste pagina-aanpassing onder Index: indexpagina of de spiegelrand onder de eerste galerie-aanpassing onder Index: galerie, afhankelijk van het type van het bovenste gedeelte.
- Het tweede gedeelte moet een inhoudsgedeelte zijn zonder banner.
- De kleur van de spatiëring is dezelfde als die van de pagina. Voor het beste resultaat stem je dit af op de randkleur.
Meer hulp bij Indexen
Houd er rekening mee:
- Indexpagina's hebben geen introductiegebieden en de introductiegebieden voor subpagina's worden niet weergegeven.
- In de headernavigatie creëren indexpagina's één enkele hyperlink.
- In de footers van indexpagina's worden alle links naar hun subpagina's weergegeven.
- Je kunt een index gebruiken om een diavoorstellingsbanner of achtergrondafbeelding over de gehele pagina te maken.
- Bekijk onze tips voor het toevoegen van 'andere soorten content'.
- Zie Indexpagina's gebruiken voor meer hulp.
Structuur en stijl
Gebruik deze opties om het uiterlijk en gevoel van je site te veranderen.
Ajax laden
Ajax is een speciale methode voor het laden van sites die pagina's met veel inhoud, zoals blogpagina's, sneller en wendbaarder maakt. Om een soepele browse-ervaring te creëren, raden we aan om Ajax-laden ingeschakeld te laten.
- Schakel het laden van Ajax in of uit met de instelling Ajax-laden inschakelen onder Site: laden.
- Stijl of verberg de laadbalk die wordt weergegeven tijdens het laden van pagina's met de andere aanpassing site: laden .
- Soms kan Ajax conflicteren met aangepaste code, anchor-links en analytics.
- Ga voor meer hulp naar Ajax laden.
Rand
Voeg een site-breed kader toe rond de header, de hoofdcontentgebied en de footer met site: rand tweaks. Voorpagina's tonen de rand niet.
Lettertypes
Stijl de lettertypen op je site met deze opties voor sitestijlen:
- Site-lettertypen - content: lettertypen en content: kleuren
- Tekst op banners – alle aanpassingen (overlay)
- Galerieindexgedeelten - Index: galerie
- Header-elementen - In hun header-gedeelten (bijvoorbeeld header: branding)
- Productpagina's - Producten
- Blogpagina's - Blog: typografie & kleuren
Tekstlinks zijn onderstreept.
Parallax scrollen
Parallax is een speciaal scrolleffect waarbij achtergrondafbeeldingen of video's langzamer bewegen dan de pagina-inhoud. Brine heeft parallax scrollen voor zijn banners.
Knoppen delen
Je kunt knoppen delen toevoegen aan de meeste pagina's. Bezoekers gebruiken deze knoppen om inhoud te delen op hun socialemediaprofielen.
- Blog- en winkelpagina's - Geavanceerde deelknoppen
- Album- en evenementenpagina's - Klassieke deelkoppelingen
Zijbalk
Zijbalken worden niet ondersteund voor Brine. Voeg in plaats daarvan extra inhoud toe aan de footer, introductiegebied en layoutpagina's.
Site breedte
Stel de breedte in met de aanpassingen in Site:
- Stel de breedte van het contentgebied in met Breedte.
- De lay-out die je kiest met Ontwerp bepaalt hoe het contentgebied wordt weergegeven.
- De siterand heeft ook invloed op de lay-out.
In de onderstaande voorbeelden is de breedte ingesteld op 880 pixels. De achtergrondkleur van het contentgebied wordt ingesteld in het hoofdgedeelte van de sitestijlen.
Ontwerp: volledige breedte
De inhoud wordt weergegeven op de breedte van de browser, minus de zijopvulling. Banners worden schermbreed weergegeven.
Ontwerp: volledige achtergrond
De inhoud wordt weergegeven met het bedrag breedte, min de zijopvulling. Banners worden schermbreed weergegeven.
Ontwerp: beperkte breedte
De achtergrondkleur van het sitegedeelte wordt buiten het contentgebied weergegeven. Banners worden weergegeven in het contentgebied.
ingesprongen content
Gebruik de ingesprongen content om opvallende lay-outs te maken. Wanneer ze in één kolom worden weergegeven, zijn sommige blokken, zoals tekst- en citatenblokken, smaller dan andere pagina-inhoud, zoals afbeeldingblokken.
- Dit heeft invloed op alle gebieden waar je blokken kunt toevoegen, inclusief introductiegebieden en de footer.
- Stel de breedte in met ingesprongen content onder Main.
- Om het ingesprongene te verwijderen, stel je ingesprongen content in op 0.
- Ga voor meer hulp naar ingesprongen content.
Achtergrondkleuren
Gebruik de volgende aanpassingen om de achtergrondkleuren voor je site in te stellen:
- Hoofdcontentgebied - Kleur in Hoofd
- Zijmarges - Achtergrond in de site
- Rand - Kleur in Site: rand
- Top header - Achtergrond in Header: top
- Onderste header – komt overeen met het hoofdcontentgebied of toont een banner
- Footer - Achtergrondkleur in footer
- Indexgedeelten - komt overeen met het hoofdcontentgebied of toont een banner
- Achter transparante bannerafbeeldingen – overlay-kleur in Main: overlay, zelfs als deze kleur is ingesteld op transparant
Tip: Je kunt een Index gebruiken om het effect van een pagina-achtergrondafbeelding te creëren.
Dit voorbeeld toont veel van de achtergronden:
Mobiel
Met Squarespace' ingebouwde responsive design past je site zich aan om er geweldig uit te zien op elk apparaat. In Brine kun je aanpassen hoe je site wordt weergegeven op mobiele apparaten en smalle browsers.
Kies de browserbreedte waarop je site overschakelt naar de mobiele weergave met de Mobile breakpoint -tweak onder Mobile. De standaardwaarde is 640 pixels.
Navigatiebalken
Mobiele header-elementen worden weergegeven in navigatiebalken boven of onder.
- Om een bovenste of onderste balk toe te voegen, zet je er een header-element in. Ga bijvoorbeeld naar het gedeelte mobiel: branding van de sitestijlen en kies positie: linksboven om de bovenste balk toe te voegen.
- Kies of de bovenste balk vast bovenaan blijft staan of met de pagina mee omhoog scrolt met de tweak Vaste mobiele bovenkant onder Mobiel: bovenkant.
- De onderste balk staat altijd vast.
- Stel de achtergrondkleuren in met de aanpassingen Mobile: top en Mobile: bottom.
Header-elementen
De header-elementen van je site worden weergegeven in de navigatiebalken en hebben aparte mobiele stijlen.
- Stijl ze in elk van hun mobiele gedeelten van de sitestijlen. Stijl bijvoorbeeld de sitetitel of het logo met de aanpassingen mobiel: branding .
- Navigatie wordt samengevouwen tot een ☰-pictogram. Zowel de primaire als de secundaire navigatie worden weergegeven wanneer op de ☰ wordt getikt.
- Stel de achtergrondkleur van de navigatie in met de Menukleur -tweak onder Mobiel menu: algemeen.
- Knop sluiten aanpassingen in Mobiel menu: algemeen stylen de X die het navigatiemenu sluit.
- Socialemediapictogrammen en slogans worden niet weergegeven op mobiele apparaten.
- Wanneer erop wordt getikt, opent het zoekpictogram een overlay met een zoekbalk. De overlay-achtergrond volgt de achtergrondkleur van de site.
Hoewel ze verschillende stijlen hebben, wordt hetzelfde element zowel op de computer als op mobiele apparaten weergegeven. Zo kun je bijvoorbeeld:
- Kan - Geef de titel van je mobiele site een andere kleur en een ander lettertype.
- Kan - Je zoekbalk weergeven op mobiel, maar verbergen op een computer.
- Kan niet - Toon een sitetitel op een computer en een logo op mobiel.
Meer hulp met mobiele apparaten
Houd er rekening mee:
- Winkelpagina's hebben mobiele stijlopties.
- Indexnavigatie verdwijnt op mobiele apparaten.
- Parallax scrollen werkt op mobiel.
- Videobanners worden soms niet geladen bij langzame verbindingssnelheden en oude browserversies. Stel een mobiele fallbackafbeelding in die verschijnt wanneer de videobanner niet kan worden geladen.
- Lange koppen worden afgebroken met een koppelteken en naar de volgende regel verplaatst.
- In tegenstelling tot sommige sjablonen kun je mobiele stijlen niet uitschakelen.
- Bekijk onze oplossingstips voor problemen met het bijsnijden van mobiele banners en achtergrondafbeeldingen.
- Bekijk onze algemene tips over hoe sites zich gedragen op mobiele apparaten.
Sjablonen in de Brine-familie
Alle sjablonen in de Brine-familie hebben dezelfde stijlopties en functies. Je kunt Brine-sjablonen bekijken in de sjabloonwinkel van versie 7.0.
De Brine-categorie omvat:
- Aria
- Basil
- Mengsel
- Pekel
- Burke
- Cacao
- Klei
- Aangepast sjabloon (stopgezet)
- Ethan
- Fairfield
- Feed
- Foster
- Greenwich
- Luik
- Hoogtes
- Hunter
- Hyde
- Impact
- Uitstapje
- Juke
- Keene
- Kin
- Lincoln (stopgezet)
- Esdoorn
- Margot
- Marta
- Mentor
- Mercer
- Miller
- Mojave
- Moksha
- Motto
- Nieuw
- Pedro
- Polaris
- Nastreven
- Rally
- Rover
- Royce
- Sofia
- Sonny
- Sonora
- Stella
- Thorne
- Gelofte
- Wav
- West
Taalopties
Brine biedt ondersteuning voor twee taalopties: