Handleiding secties

Inleiding

Als webredacteur stel je de pagina’s van onze website samen met secties. Secties kun je zien als voorgevormde regels of alinea’s. Door het werken met secties krijgen we een mooie uniforme opbouw van de pagina’s die onder alle omstandigheden, zowel op computers als op mobiele apparatuur, goed leesbaar is.

Alle secties worden bij elkaar gehouden binnen een groot blok met de aanduiding “Content pagina’s”. Binnen dit blok wordt de inhoud gevormd door een of meer secties.

Werking secties

Een sectie op een pagina is een regel die uit 1 of 2 blokken bestaat. Deze blokken zijn een stuk tekst, een afbeelding of enkele ‘knoppen’ voor een link. Op een breed computerscherm staan deze blokken naast elkaar (afb. 1); op een smartphone staan ze onder elkaar (afb. 2).

Alle secties worden bij elkaar gehouden als Content. Deze hele groep met alle secties kun je, al dan niet per ongeluk, verbergen als je op de bovenste balk klik. Het lijk dan alsof er ineens niet meer op jouw pagina staat. Klik je weer opnieuw op de balk of op het driehoekje, dan heb je alles weer terug.

Voor de website gebruiken we verschillende layouts, waarbij we steeds een andere samenstelling hebben van de verschillende blokken.

In een pagina kunnen onder elkaar verschillende secties worden toegevoegd, verschoven of verwijderd.

Het toevoegen kan op 2 manieren. Door het gebruik van de knop “Nieuwe Sectie” onderaan de ‘Content pagina’s” (1) of door het “+”-knopje (2) bovenaan een sectie. Hiermee voeg je een sectie in voor de huidige sectie.

Een sectie verwijderen doe je middels het “-“-knopje (3) dat in het midden van de sectie verschijnt als je muiscursor in een sectie zet.

De volgorde van de secties aanpassen kan ook. Dat doe je door de muiscursor in de linkerbalk te plaatsen (4). Er verschijnt dan een ‘verplaats-kruis’ waar je op kunt klikken. Hou de muisknop ingedrukt en verschuif de sectie omhoog of omlaag.

Het verschuiven van de secties gaat veel gemakkelijker als je de secties eerst inklapt. Dat doe je door te klikken op het pijltje linksboven in de sectie (5). De sectie krimpt dan tot de balk waarin alleen de soort layout staat. Als je dat met alle secties doet, dan kun je heel gemakkelijk schuiven (6).

Verschillende layouts

Bij het invoegen van een nieuwe sectie moet de keuze gemaakt worden voor de layout.

De beschrijving van de sectie geeft aan uit welke blokken deze layout is samengesteld. De blokken die we tot onze beschikking hebben zijn een ‘tekstblok’, een ‘afbeeldingblok’ en een ‘knoppenblok’.

Er zijn 2 layouts die alleen bestaan uit een breed tekstblok. De eerste is de ‘Introtekst’. Deze blok komt bovenaan en geeft kort weer waar de betreffende pagina over zal gaan. De andere is de ‘Quote’. Hierbij kun je een uitspraak of een zegswijze opnemen die, met een aangepast lettertype en grotere marges, duidelijk in beeld wordt gebracht.

Een normale pagina wordt als volgt opgebouwd:

• Intro sectie
  De eerste regels van de introductie worden dik gedrukt geschreven.
• Blokken tekst met afwisselend een afbeelding links en rechts. Dit geeft de feitelijke inhoud van de webpagina. Als een link naar een andere pagina opgenomen moet worden, dan kan iedere sectie een ‘Knop’ krijgen waarin een URL kan worden opgenomen.

Werking van het tekstblok

De inhoud van het tekstblok wordt gemaakt met de teksteditor.

De teksteditor is de basis van alle onderdelen van de website waar tekst wordt ingezet. Hij is beschreven in de Handleiding editor. Deze bereik je met onderstaande knop.

Werking van het afbeeldingblok

We kennen 2 layouts waarbij we naast de tekst een afbeelding kunnen plaatsen. Het onderscheid zit in de positie van de afbeelding ten opzichte van de tekst. In de sectie editor zie dit onderscheid niet: de afbeelding staat hier altijd links, maar de layout bepaalt uiteindelijk waar de afbeelding op de website komt. Zoals ook bij de Werking van de secties al vermeld wordt het blok dat op een computerscherm rechts staat op een smartphone onder het blok geplaatst.

Het plaatsten van een afbeelding gaat als volgt:

• Klik in de sectie op de knop ‘Voeg afbeelding toe’ (1)
• Op het vervolgscherm zoek een bestaande afbeelding op in de Mediabibliotheek (2) of zet een nieuwe afbeelding op de website door ‘Bestanden uploaden’ (3)

In het geval van een nieuwe afbeelding dien je rekening te houden met de grootte. De foto’s worden op een beeldscherm bekeken en dan is een maximale grootte van 1.920 x 1.080 pixels heel gebruikelijk.

In het geval je andere content dan een afbeelding wil plaatsen (b.v. een PDF-bestand) gebruik dan de layout “Dubbele content”. Je krijgt dan een sectie waar je op 2 plaatsen de editor ziet. In de editor onder “Sectie extra” kun je vervolgens met “Media toevoegen” een PDF bestand invoegen.

Werking van het knoppenblok

Binnen een sectie kan op 2 plaatsen een of meerdere knoppen worden toegevoegd. De eerste plaats vind je binnen iedere sectie die uit 2 blokken bestaat. Hier kan onderaan het tekstblok een serie van 3 knoppen worden toegevoegd. Dit doe je als volgt:

• Klik onder ‘Knop?’ op Ja (1)
• Vul de tekst in die op de knop moet komen (2)
• Klik op ‘Selecteer link’ (3)
• en vul het scherm in met de gegevens van de link

De andere plaats is het blok met ‘Herhalende knoppen’.  Bij dit blok kun je een hele serie knoppen onder elkaar invoegen. Iedere knop heeft hierbij zijn eigen tekstregel en een eigen tekst op de knop. Dit doe je als volgt:

• Klik onder ‘Button herhaler’ op ‘Nieuwe knop’ (1). Er verschijnt een nieuw blok dat je kunt invullen.
• Vul de tekstregel in die links van de knop moet verschijnen (2)
• Vul de ‘Knop tekst’ in (3)
• Klik ook hier op ‘Selecteer link” en vul, net als hierboven, het scherm in voor de hyperlink.

Als je een link naar een pagina van onze eigen website wil opnemen, dan kun je hier gemakkelijk naar zoeken (4). Klik op de gevonden pagina en de URL en omschrijving wordt keurig ingevuld.

Werking van de foto galerij

Een speciaal soort sectie is de foto galerij. Met behulp van deze sectie kun je gemakkelijk een serie foto’s laten zien. De layout van de galerij kent 3 varianten. De verschillen lichten we verderop toe. De werking van de galerij is in alle gevallen hetzelfde. Op de pagina krijg je een mooi overzicht van alle foto’s die je wil laten zien. Als je deze beter wil bekijken kun je er een aanklikken en dan verschijnt deze in volledige grootte. Vervolgens kun je weer terug naar het overzicht, of met behulp van de pijltjes verder door de foto’s bladeren.

Het opzetten van de galerij doe je als volgt:

• Kies bij de layouts voor een van de galerijen
• Klik op de knop “Afbeeldingen toevoegen”
• Je komt dan in de mediabibliotheek waar je verschillende afbeeldingen kunt selecteren
• Klik de verschillende foto’s aan en kies voor de knop “Selecteren”
• Je keert dan terug naar de layout.
• Hier kun je alsnog foto’s verwijderen. Klik hiervoor op het kruisje (1).
• De volgorde wijzigen doe je door op de afbeeldingen te klikken en deze naar een andere plaats te slepen (2).
• Een bestaande galerij kun je op deze manier ook aanpassen.
• Ook hier niet vergeten om aan het eind van de bewerking op “Updaten” te klikken.

Verschillende layouts

De foto galerij kun je er op verschillende manieren uit laten zien. In het voorbeeld zie je dezelfde afbeeldingen op 3 verschillende manieren.

• Grid
  Hierbij zijn de plaatjes allemaal even groot uitgesneden en kun je aangeven uit hoeveel kolommen het raster moet bestaan.
• Justified
  De afbeeldingen houden hierbij hun oorspronkelijke hoogte-breedte verhoudingen. De verdeling wordt dan zodanig gemaakt de hoogte wel gelijke wordt. Er zit dan dus variatie in het aantal afbeeldingen per rij. Uitgangspunt is dat er 4 afbeeldingen naast elkaar gebruikt worden, maar dat kunnen er ook 5 of 6 worden.
• Masonry
  Hierbij worden ook de oorspronkelijke verhoudingen in stand gehouden. Alleen zijn hier de kolommen even breed en verschilt dus de hoogte. Eigenschap van deze layout is dat het nooit zeker is hoe de volgorde er uit gaat zien. In het voorbeeld zie je dan ook dat hier de volgorde niet gelijk is aan de andere twee.