De stijl en kenmerken van de Pacific-sjabloonfamilie.
De Pacific-sjabloonfamilie (Bryler, Charlotte, Horizon, Naomi, Pacific) gebruikt tekstoverlays en een scrollende schermbreed indexpagina om al je content samen te brengen in één enkele stem.
Deze gids beschrijft de kenmerken en ontwerpmogelijkheden van de Pacific-familie. Aanpassingen van sitestijlen en het gedeelte waaronder ze verschijnen in het paneel sitestijlen zijn vetgedrukt.
Ondersteunde pagina's
Pacific ondersteunt deze paginatypes:
- Albumpagina's
- Blogpagina's - Lijst
- Voorpagina's
- Evenementenpagina
- Galerijpagina's - Standaard
- Indexpagina's - Stapel
- Lay-outpagina's
- Winkelpagina's - Klassiek
Header
Bezoekers gebruiken de header bovenaan om door uw site te navigeren. In Pacific bevat de header de sitetitel of logo (branding) en navigatielinks.
- De branding is gecentreerd.
- Index-homepagina's kunnen vaste navigatie hebben.
Stijl de lettertypen en kleuren van de header met de Site-header -aanpassingen:
- Stel de headerkleur in met Achtergrond kleur.
- Toon banners achter de header met transparant op bannerafbeeldingen.
- Wijzig de grootte van de sitetitel met de diavoorstelling lettertypegrootte in de tweak Lettertype van de sitetitel. Ga niet hoger dan 72 pixels om vervorming te voorkomen.
- Wijzig de logo-grootte met Logo breedte.
Geef de navigatielinks vorm met de aanpassingsopties voor de sitenavigatie. Kies of de navigatie op de pagina verschijnt of achter een ☰ pictogram met Altijd overlay navigatie gebruiken.
- Als dit niet is aangevinkt, worden de navigatielinks onder de branding weergegeven of aan beide zijden gesplitst. Dit hangt af van het aantal pagina's en de breedte van de browser.
- Verander de hyperlinkkleur en stel de overlay-achtergrond in met achtergrondkleur.
- In de ☰-overlay wordt het formaat van links automatisch aangepast zodat ze het beste bij het menu passen. Het hyperlink-lettertype: aanpassing van de lettergrootte heeft daar geen invloed op.
Banners
Banners creëren een visueel element dat de toon kan zetten voor je pagina. Voeg pagina-uitgelichte afbeeldingen en video's toe om banners te maken.
- Banners worden weergegeven op album-, blog-, evenementen-, galerie- (alleen afbeeldingen), product- en lay-outpagina's.
- Stapel meerdere banners verticaal in een index.
- Paginatitels en beschrijvingen en de siteheader kunnen de banner overlayen.
- Voeg een kleurenfilter toe met de Overlaykleur aanpassing onder Paginabanner. Indexgedeelten hebben afzonderlijke overlaykleuren.
bannertekst
Paginatitels en beschrijvingen kunnen op banners worden weergegeven.
- Stijl de lettertypen met de aanpassingen voor de paginabanner. Verberg alle titels met Pagina-titel weergeven.
- Om paginabeschrijvingen te verwijderen, verwijder je ze uit de pagina-instellingen. Om ze te verwijderen zonder de bannerhoogte te beïnvloeden, vervang je de tekst door regeleinden.
- Om andere teksten te gebruiken voor zoekresultaten, voeg je SEO-titels en beschrijvingen toe.
bannerhoogte
Om de hoogte aan te passen, kun je:
- Wijzig de opvulling onder de paginabanner.
- Voeg hoogte toe aan de paginabeschrijving door regeleinden toe te voegen.
Meer hulp bij banners
Houd er rekening mee:
- Videobanners worden soms niet weergegeven op mobiele apparaten, afhankelijk van de verbindingssnelheid en de browserversie. Stel een mobiele fallbackafbeelding in die verschijnt wanneer de videobanner niet kan laden.
- Als een galeriepagina geen uitgelichte afbeelding heeft, wordt de eerste afbeelding automatisch de banner zodra je een wijziging in de galerie aanbrengt. Als je geen banner op je galeriepagina wilt, open dan de pagina-instellingen om de uitgelichte afbeelding te verwijderen.
Achtergrond
Stel de achtergrondkleur van de site in met de tweak Achtergrondkleur onder Hoofdinhoud.
- De header, footers en pre-footer hebben hun eigen achtergrondkleuren.
- Je kunt afwisselende achtergrondkleuren instellen voor gedeelten in een index.
Footers
Pas de sitebrede footer van Pacific aan met blokken. De footer kan navigatiekoppelingen, contactgegevens en een tweede contentgebied, de pre-footer, bevatten.
Geef de footer, contactgegevens en footernavigatielinks vorm met de Footer -aanpassingen:
- Geef de contactgegevens weer en pas ze aan met de aanpassingen voor de site-info.
- Wijzig de informatie met de velden Fysieke locatie, contact-e-mailen contacttelefoonnummer in bedrijfsinformatie.
Tip: Als je de Site-info tweak niet ziet, bekijk een ander sjabloon op je site en annuleer de voorbeeldweergave.
De pre-footer wordt boven de footer weergegeven.
- Stijl de achtergrond- en tekstkleuren in het Prefooter-gedeelte van sitestijlen.
- Om de pre-footer weer te geven, kies Inhoud: aangepast. Om het te verbergen, kies je Inhoud: leeg.
Houd er rekening mee:
- De democontent van sommige sjablonen bevat een socialemedialinkblok. Verwijder het blok om de socialemediapictogrammen te verwijderen.
- Tekstlinks in de footer en pre-footer zijn onderstreept.
Blogpagina's
De blogpagina's van Pacific worden weergegeven als een lijst met verticaal onder elkaar staande posts.
Op de landingspagina:
- Voeg categorienavigatie toe om categoriefilters bovenaan de pagina weer te geven.
- Uitgelichte afbeeldingen van posts worden weergegeven onder de titel voor posts die uittreksels hebben.
- Uittreksels tonen links naar "Lees meer".
- De volledige content van individuele posts wordt onder de titel weergegeven voor posts zonder uittreksels.
Op individuele posts:
- Bij individuele berichten vind je onder de reacties navigatie naar vorige en volgende berichten.
- Tekstblokken met één kolom worden ingesprongen aan beide zijden. Dit maakt je posts visueel interessanter door de lay-out te variëren. Er zijn geen opties om de breedte van de inspringing te veranderen.
Stijl de metagegevens met de Blog -aanpassingen:
- Datum, categorieën en auteursnamen worden boven de post weergegeven. Gebruik de Meta-prioriteit om een van deze boven de titel van de post te plaatsen.
- Om auteursnamen te verbergen, kies “Auteur verbergen”. Deze tweak is niet beschikbaar als Meta prioriteit: auteur is geselecteerd.
- De bron-URL's, tags en de knoppen voor reacties, liken en delen worden onder de post weergegeven. Vink lijstvermelding footer verbergen aan om ze te verbergen.
Stijl de tekst met deze aanpassingen aan de hoofdinhoud:
- Stijl de metagegevens met de Meta-aanpassingen.
- De titels van posts volgen de aanpassingen van kop 1.
- De hoofdtekst volgt de aanpassingen van het lettertype en de tekstkleur.
Indexpagina's
Pacific-indexpagina's bundelen de content van meerdere pagina's in gestapelde gedeelten, zodat je verschillende afbeeldingen en informatie op één plek kunt uitlichten.
- Contentgedeeltes worden gemaakt van lay-outpagina's. Ze zijn een goede optie om tekst, knoppen en andere blokken toe te voegen.
- Indexgedeelten van galerieën worden gemaakt van galeriepagina's en kunnen worden weergegeven in een raster of een diavoorstelling.
- Albumgedeelten zijn gemaakt van albumpagina's.
- Uitgelichte afbeeldingen van de pagina worden als achtergrond weergegeven voor inhouds- en albumgedeelten.
Gedeeelten van de galerij-index
Stijlgalerie-indexgedeelten in het Indexgalerie-galeriegedeelte van sitestijlen. Stel de lay-out van alle galerij-indexgedeelten in met de Design tweak.
Voor lay-outs van diavoorstellingen:
- Kies of galerijen automatisch afspelen en stel de overgang van de diavoorstelling in op Vervagen of Scrollen.
- Navigatie-elementen toevoegen of verbergen met Galeriebedieningen.
- Voeg een oogpictogram toe waarmee bezoekers onderschriften kunnen in- of uitschakelen via de Galerie-overlay-schakelaar.
- De titels en beschrijvingen van de afbeeldingen staan in het midden van de afbeelding.
Voor rasterlay-outs:
- Kies met maximaal aantal rasterkolommen hoeveel afbeeldingen er horizontaal worden weergegeven.
- Afbeeldingstitels worden weergegeven bij zweven. Afbeeldingsbeschrijvingen worden niet weergegeven.
Video's toegevoegd aan de galerie:
- Op mobiel openen in een lichtbak.
- Kan automatisch afspelen.
Gedeelteachtergronden
Voor inhoud en albumsecties:
- Uitgelichte pagina-afbeeldingen worden als achtergrond weergegeven.
- Gedeelten zonder uitgelichte afbeeldingen tonen de achtergrondkleur van de site.
- Gebruik de Section separator tweak onder Index om te kiezen wat er gebeurt wanneer er twee opeenvolgende secties zonder achtergrondafbeeldingen zijn. Je kunt afwisselende achtergrondkleuren gebruiken of een rand die de gedeelten verdeelt.
Voor de indexgedeelten van de galerij:
- Diavoorstellingslay-out - Afbeeldingen worden schermbreed weergegeven.
- raster lay-out - De kleurafstelling van de galerijoverlay onder Indexgalerij wordt volledig ondoorzichtig weergegeven in elke lege ruimte in het raster.
Kleuroverlays
Je kunt een kleurfilter toevoegen aan afbeeldingen en video's. Dit helpt alle overlappende inhoud op te vallen.
- Inhoud en albumgedeelten - Gebruik de kleurafstelling onder overlay.
- Galerijindexgedeelten - Gebruik de overlaykleur van de galerij aanpassing onder Galerijindex. De kleur verschijnt alleen op afbeeldingen met titels of beschrijvingen. Bij rasterlay-outs wordt de kleur weergegeven bij zweven.
Hoogte gedeelte
Om de hoogte van de content- en albumgedeelten te wijzigen, pas je de opvulling aan met de volgende instellingen:
- Gedeelten met bannerafbeeldingen – Gebruik Paginaopvulling onder Index-overlay.
- Gedeelten zonder bannerafbeeldingen – gebruik pagina-opvulling onder index.
- Voor inhoudsgedeelten kun je ook hoogte toevoegen door extra regeleinden aan de paginainhoud toe te voegen.
Verander de hoogte van de indexgedeelten in de galerie met de aanpassingen voor de indexgalerie:
- Lay-out van de diavoorstelling - Pas de beeldverhouding van de diavoorstelling aan.
- Rasterlay-out - Wijzig de beeldverhouding en het maximum aantal kolommen van het raster.
Navigatielinks
Op indexpagina's die als homepagina zijn ingesteld:
- De header-navigatie kan worden vergrendeld zodat deze bovenaan het browservenster verschijnt wanneer je naar beneden scrolt voorbij het eerste gedeelte van de indexpagina (vaste navigatie).
- Je kunt links voor inhouds- en albumgedeelten toevoegen aan de navigatie. Wanneer je op de hyperlink klikt, scrolt de pagina naar dat gedeelte.
Om de navigatie te vergrendelen, kies je Index scroll nav: show on scrollen in het sitenavigatiegedeelte van sitestijlen. Stel de achtergrondkleur van de navigatie in met Achtergrondkleur onder site-header.
Houd er rekening mee:
- De branding van de site wordt niet weergegeven.
- Je moet meer dan één gedeelte in je index hebben om de vergrendelde navigatie te laten verschijnen.
Om navigatielinks te maken voor content- en albumgedeelten, controleer de tweak Expand homepagina index links onder Site-navigatie.
- De indexgedeelten van de galerij worden niet weergegeven in de navigatie. Gebruik in plaats daarvan ankerlinks om links voor hen te maken.
Meer hulp bij indexpagina's
- Bewerkingsannotaties mogen niet verschijnen op lege gedeelten. Om een lege pagina te bewerken, verplaats deze uit de index, voeg inhoud toe en verplaats hem vervolgens terug.
- Gebruik de aanpassingen aan de Index overlay om de kleur van knoppen, formulieren en citatenblok in afbeeldingen te wijzigen.
- Knoppen delen worden altijd weergegeven in albumgedeelten.
Categorienavigatie
Bezoekers gebruiken categorienavigatielinks om pagina's te filteren op post of productcategorieën.
Voeg categorienavigatie toe en pas deze aan bovenaan blog- en winkelpagina's in het gedeelte "Categorienavigatie" van de sitestijlen. Stijlwijzigingen hebben invloed op alle categorienavigaties op je site.
Winkelwagentje
Een winkelwagentjeknop verschijnt in de rechterbovenhoek van alle pagina's nadat een klant een product aan zijn winkelwagentje heeft toegevoegd. Om de knop te stylen:
- Voeg minstens één product toe aan je winkelwagentje, zodat de winkelwagenknop verschijnt.
- Wijzig de achtergrondkleur van de winkelwagentjeknop en de lettertypekleur van de winkelwagentjeknop onder de site-header.
Mobiel
Met het ingebouwde responsive design van Squarespace past je site zich aan zodat het er op elk apparaat geweldig uitziet.
- De navigatie wordt samengevouwen tot een ☰ in de linkerbovenhoek, en kan vergrendeld blijven terwijl je scrolt op de indexpagina's die als homepagina zijn ingesteld.
- De sitetitel of het logo wordt bovenaan in het midden weergegeven, met een maximale hoogte van 50 pixels.
- De knop voor het winkelwagentje wordt rechtsonder weergegeven.
- Je kunt de mobiele stijlen uitschakelen, maar we raden het niet aan.
- Rastergalerijen tonen twee afbeeldingen per rij. Als je een oneven aantal afbeeldingen hebt, zal er een lege ruimte naast de uiteindelijke afbeelding staan.
Koppen worden op mobiele apparaten niet groter weergegeven dan deze maximale afmetingen:
- Kop 1 - 34 pixels
- Kop 2 - 26 pixels
- Kop 3 - 20 pixels
Op smartphones:
- Een Terug naar boven hyperlink verschijnt onderaan boven de footer.
- Galerijen op indexpagina's tonen geen afbeeldingsbeschrijvingen.
Taalopties
Binnen deze familie ondersteunen de sjablonen Charlotte, Naomi en Pacific twee taalopties:
- Kies de taal voor de ingebouwde tekst van je site, zoals inzendformulieren en het bericht 'Bestelling bevestigd'.
- Start een nieuwe site met een Frans, Duits, Italiaans, Portugees of Spaans sjabloon.
Problemen oplossen met Pacific
Hier zijn enkele veelvoorkomende problemen met deze sjabloon. Sommige hiervan zijn bugs of bekende problemen. Hoewel we Squarespace versie 7.0 nog steeds ondersteunen, heeft het oplossen van bugs of problemen voor ons een lagere prioriteit, omdat we ons nu richten op ons huidige platform, versie 7.1. Je kunt je versie 7.0-site verplaatsen naar versie 7.1 met onze updatetool.
RSVP- of registratielinks toevoegen
Om deze links toe te voegen:
- Maak een RSVP-knop aan op een lay-outpagina met behulp van een formulierblok. Dit blok verzamelt informatie van bezoekers.
- Maak registerlinks op een lay-outpagina met een raster-galerieblok, met afbeeldingen met doorklik-URL's naar verschillende registersites.
Pas de headers en tekst aan op indexpagina's
Hoe je binnen een index de kleur en grootte van de kop en tekst aanpast, hangt af van het type pagina en of er een bannerafbeelding is. Stijl dit in de sitestijlen.
Voor gedeelten van content en albums met achtergrondafbeeldingen:
- Wijzig het lettertype en de typografie met behulp van de aanpassingen in het hoofdinhoud -gedeelte.
- Pas de kleur en grootte aan met de aanpassingen in het gedeelte Index overlay.
Voor content- en albumgedeelten zonder achtergrondafbeeldingen:
- Wijzig lettertype, typografie, kleur en grootte met de tweaks in het gedeelte Hoofdinhoud .
Voor galeriepagina's gebruik je het gedeelte Index-galeriegedeelte.
Maak een banner zonder bijsnijden en met een index
Paginabanners in elke sjabloon worden altijd enigszins bijgesneden, vooral op mobiele apparaten.
Met de indexpagina in de Pacific-familie kun je een headerbanner maken die niet wordt bijgesneden:
- Voeg een indexpagina toe.
- Voeg een galeriepagina toe aan de index.
- Voeg je favoriete bannerafbeelding toe aan de galeriepagina. Voeg niet meer dan één afbeelding toe, omdat dit het bijsnijden zal beïnvloeden.
- Voeg tekst toe aan de velden Afbeeldingtitel en Beschrijving. Deze tekst wordt over de afbeelding weergegeven.
- In sitestijlen scrol je omlaag naar Indexgalerij en selecteer Ontwerp: diavoorstelling en Beeldverhouding diavoorstelling: automatisch.
- Voeg pagina-inhoud toe die je onder de banner wilt weergeven als tweede pagina in de index.
Gebruik deze stijlaanpassingen om de weergave van de afbeelding op de galeriepagina verder te verfijnen:
- Transparant op bannerafbeeldingen – toon de siteheader boven de afbeelding.
- Galerie-overlaykleur - Pas het kleurfilter over de afbeelding aan.
- Titel galerij en Beschrijving galerij - Pas het lettertype en de kleur van de tekst van de afbeelding in de galerij aan.
De galerijafbeeldingen in de index zijn donkerder dan normaal.
De indexpagina toont mogelijk het indexgedeelte van de galerij met een gedeeltelijk transparant filter.
Als je deze overlaykleur wilt wijzigen of verwijderen, gebruik je de tweak Galerij-overlaykleur in het Indexgaleriegedeelte van de sitestijlen. Gebruik de opaciteitsschuif om de transparantie aan te passen.
De kleuren van de galerijoverlay worden niet weergegeven.
De kleur van de galerijoverlay verschijnt wanneer er een beschrijving of titel voor die afbeelding is. Als er geen beschrijving of titel is, wordt de overlaykleur niet weergegeven.
Om te leren hoe je een titel of beschrijving van een afbeelding toevoegt, ga je naar galeriepagina's gebruiken.
Hoe geef ik de pre-footer vorm?
Als de pre-footer geen content heeft, is die niet zichtbaar wanneer sitestijlen open zijn. Om het te zien:
- Sitestijlen verlaten.
- Voeg content toe aan de pre-footer.
- Open de sitestijlen opnieuw om door te gaan met het aanbrengen van wijzigingen.
Ik kan de pre-footer niet vinden.
Je hebt de Prefooter mogelijk ingesteld op Content: leeg in sitestijlen. Hiermee wordt je pre-footer verborgen voor bezoekers en kan deze niet worden bewerkt. Om de pre-footer weer zichtbaar te maken:
- Open het paneel voor sitestijlen.
- Scrollen omlaag tot Pre-footer.
- Gebruik het uitklapmenu om Content in te stellen op Content: aangepast.
- Breng indien nodig stijlaanpassingen aan, zoals het instellen van de achtergrond-, kop- en tekstkleur.
- Klik op Opslaan aan de bovenkant van het paneel.
Ik kan mijn scheidingsrand niet zien
Als je de scheidende randen tussen gedeelten niet kunt zien zonder bannerafbeeldingen:
- Open sitestijlen terwijl je op de indexpagina bent.
- Schakel in het gedeelte Index het selectievakje Gedeeltescheiding: rand in.
- Pas de randkleur aan. Je moet misschien de transparantie aanpassen.
De indexpagina gaat niet helemaal naar boven als je scrolt
Wanneer je indexpagina als homepagina is ingesteld, brengen de indexpaginalinks in de navigatie je naar de bovenkant van elk gedeelte van de indexpagina. Om ervoor te zorgen dat de hyperlink in het bovenste gedeelte je naar de bovenkant van je site brengt:
- Ga naar je indexpagina.
- Open het paneel voor sitestijlen.
- Schakel in het gedeelte 'site-header' transparant op bannerafbeeldingen in.
Dit toont de titel van je site en navigatie over de banners van je site, inclusief het bovenste gedeelte van je index. Door op de hyperlink te klikken voor het bovenste gedeelte in je index (bijvoorbeeld de Home -hyperlink op de Pacific demosite) kom je nu bovenaan je site.
Als de indexpagina nog steeds niet naar boven scrollt, controleer dan of de eerste pagina in je index een lay-outpagina is en geen galerie- of albumpagina. Galerie- en albumpagina's verschijnen niet in de navigatie op de indexpagina.
De indexpagina heeft afwisselende achtergrondkleuren
Twee of meer gedeelten zonder bannerafbeeldingen op een indexpagina kunnen afwisselende achtergrondkleuren hebben.
Als je deze functie wilt uitschakelen, kies je de tweak Sectiescheiding: rand in het gedeelte Index van de sitestijlen. Dit voegt een rand toe tussen twee opeenvolgende gedeelten zonder bannerafbeeldingen.
In plaats van de hoofdnavigatielinks wordt een navigatiepictogram weergegeven.
Om deze functie uit te schakelen, schakel je het vinkje uit bij altijd overlay-navigatie gebruiken in het gedeelte site-navigatie van sitestijlen. De navigatie wordt weer als tekst weergegeven.
Op bepaalde smalle browsers, zoals mobiele apparaten, klapt de navigatiebalk altijd in achter een ☰, zelfs als je dit hebt uitgeschakeld. Dit maakt deel uit van het ontwerp van het sjabloon.
Navigatielinks ontbreken
Bevestig eerst dat de pagina's die je in je navigatie wilt hebben, zich in het hoofdnavigatiegedeelte van het Paginapaneel bevinden.
Open vervolgens het paneel Sitestijlen. Scroll naar beneden naar het gedeelte 'site-navigatie'en probeer deze tips voor probleemoplossing:
- Als een indexpagina als homepagina is ingesteld, controleer dan of Uitvouwen homepagina-index -links is aangevinkt.
- Als de navigatie wordt weergegeven als een menupictogram in de linkerbovenhoek, schakel dan Altijd overlay nav gebruiken uit.
- Controleer of de linkkleur niet transparant is.
Galerie-indexgedeelten creëren geen links in de navigatie. Voeg in plaats daarvan een contentgedeelte direct boven het galerie-indexgedeelte toe om het te introduceren, of voeg index-anchor-links toe.
Het navigatiemenu wordt achter de sitetitel weergegeven.
Dit kan gebeuren wanneer je voor het eerst de optie homepagina-indexlinks uitbreiden in de sitestijlen uitschakelt. Sla de wijzigingen op en vernieuw de pagina. De navigatie verschijnt onder de titel van je site.
De grootte van de sitetitel wordt na het laden aangepast
Dit gebeurt wanneer de sitetitel te groot is om in de container te passen. Los dit probleem als volgt op:
- Klik op de aanpassing van het lettertype van de sitetitel in het siteheader -gedeelte van de sitestijlen om ervoor te zorgen dat de lettergrootte 72 pixels of kleiner is.
- Gebruik de aanpassing containerbreedte sitetitel om de grootte van de container aan te passen aan de sitetitel.
Voor het beste ontwerp, beperk de grootte van de titel van je site tot 72 pixels of minder. Alles wat groter is, zal vervorming veroorzaken in de titel van de site, ongeacht hoe breed de container is.