Pagina creëren

Aan de slag met je eigen pagina

De mogelijkheden van WordPress hebben we doorgenomen, de werking van de Editor is uitgelegd… Klaar om te starten met het creëren van je eigen pagina. Over het bouwen van je eigen pagina kunnen we heel veel informatie verschaffen. Er zijn zo ontzettend veel mogelijkheden en blokken die je kunt toepassen. We beginnen daarom met het maken van een basis. Op die manier heb je wat tips en tricks gezien en kun je zelf je basis ombouwen naar een nieuwe pagina die bijdraagt aan het te behalen doel.

Het onderstaande stappenplan is een uitgebreide stap-voor-stap vertaling van de Content Training. Op die manier kun je altijd alle stappen nog eens rustig bekijken.

In dit hoofdstuk

Zo werkt de editor

Header

Kolommen

Sfeerafbeeldingen

Custom tegels

Grid en slider

Content slider

Tabs

Responsive content

Vrije positionering

Smart Content Tags

Header

We starten met een reeks basisonderdelen die je kunt toepassen in jouw uiteindelijke pagina. De allereerste is een headerafbeelding, ook wel hero genoemd. In WordPress heet dit een Omslagafbeelding.

Geef je pagina een titel en waar ‘Typ / om een blok te kiezen’ staat plaats je het blok genaamd Omslagafbeelding.

Omslagafbeelding
Een omslagafbeelding is een afbeelding die responsief reageert op jouw pagina. Je kunt deze op diverse breedtes instellen en vullen met enkel een achtergrondkleur, afbeelding, koppelen aan de Uitgelichte afbeelding van jouw pagina of je kunt een video plaatsen. Een video in een Omslagafbeelding speelt in een loop en altijd zonder geluid.

Het verschil tussen een omslagafbeelding en een ‘gewone’ afbeelding is dat je binnenin een omslagafbeelding andere elementen kunt toevoegen. Een afbeelding is een blok dat op zichzelf staat. Een omslagafbeelding krijgt automatisch een bedekkingskleur (overlay opaciteit) mee. Dit om contrast te maken tussen de achtergrond en de eventueel te plaatsen inhoud. Je kunt zelf de dekkingsgraad én kleur kiezen.

Kies voor het uploaden van een eigen afbeelding of voor een afbeelding die al is geüpload naar de mediatheek. Bevestig je keuze door op Selecteren te klikken. Je ziet nu een afbeelding met een half transparante dekkingslaag.

In het menu boven je omslagafbeelding kies je bij Uitlijnen voor Volledige breedte. Standaard beperkt de omslagafbeelding zich tot de breedte van de container. De hoogte kun je ook instellen. Die doe je in het menu rechts onder het tabje Stijlen bij Minimumhoogte van cover. Je kunt kiezen voor een hoogte in pixels, maar ook in px, %, em, rem, vw en vh. Deze laatste is vrij handig om een hoogte in te stellen in procenten gebaseerd op je daadwerkelijke vensterhoogte i.p.v. schermhoogte. Een waarde in % of vh is responsive gezien ook handig, omdat pixels voor zowel grote als kleine schermen vast staan.

Enkele mogelijkheden

1. Uitlijnen

Kies voor verschillende uitlijningsmogelijkheden voor de omslagafbeelding. De twee meest toegepaste zijn Geen (breedte van de container) en Volledige breedte.

2. Duofilter

Optioneel kun je kiezen om een kleurfilter toe te passen op de afbeelding.

3. Positie wijzigen van inhoud

Het is mogelijk de positie te wijzigen van de inhoud van de omslagafbeelding. Tip: houdt deze altijd in het midden. Dit positioneert het makkelijkste, ook responsive gezien.

4. Volledige hoogte inschakelen

Met een klik op de knop de hoogte van de omslagafbeelding instellen op 100%.

5. Vervangen

Eenvoudig en snel de huidige afbeelding vervangen door een andere afbeelding, een video of de uitgelichte afbeelding.

6. Bedekkingskleur

Selecteer bij Bedekking een gewenste kleur (of kleurverloop) en bepaal zelf hoe doorzichtig deze moet worden met behulp van de overlay opaciteit slider.

7. Minimumhoogte instellen

Kies een gewenste waarde en vul een bijbehorend getal in. Je vindt deze optie bij het tabje Stijlen.

Plaats een titel

Binnen je omslagafbeelding plaats je het blok genaamd Koptekst.

Koptekst
Met een koptekst introduceer je nieuwe secties in je pagina. Na het plaatsen kun je selecteren of deze koptekst een H1, H2, H3, H4, H5 of H6 moet worden. Een belangrijk blok voor je vindbaarheid dus.

Lettertypegrootte en kleuren zijn in te stellen voor de koptekst, evenals de marge van dit blok.

Typ je gewenste tekst en welke heading je wil toepassen, bijvoorbeeld H1. Het is heel eenvoudig om je tekst anders uit te lijnen middels het icoon in je menubalk. Overige opmaak, zoals bold en italic, raden wij niet aan, omdat kopteksten in de basis al volgens huisstijl worden ingeladen.

Een knop plaatsen

Onder de titel kun je vast een belangrijke call to action voor deze pagina plaatsen. Je doet dit met het blok genaamd Knoppen.

Knoppen
Knoppen is een overkoepelend blok, met daarbinnen één knop.

Je kunt de eerste knop eenvoudig dupliceren om meerdere knoppen te plaatsen. Specifieke wijzigingen voor jouw eerste knop doe je rechtstreeks op Knop. Denk dan aan de stijl, de tekst in de knop en natuurlijk de link. Overkoepelende wijzigingen, zoals positionering en oriëntatie, doe je bij Knoppen.

Knop instellingen

1. Kies positie

Indien je meer dan één knop plaatst kun je de pijltjes gebruiken om een knop naar links of rechts te verplaatsen.

2. Uitlijning

De drie iconen onder de 2 hoef je niet in te stellen. Uitlijning en hoogte wordt vanuit de huisstijl automatisch ingeladen.

3. Plaats link

Plaats je de gewenste url, kun je in het venster direct zoeken op paginatitels of plaats een anker met behulp van een hashtag (#mijn-link).

4. Kies de stijl

Je hebt keuze uit 6 stijlen voor je knop. Kies voor je belangrijkste knoppen voor een Primary knop. Overige links stel je in met de rest van de stijlen.

In onderstaande video een uitleg over hoe je zelf een header kan opzetten.

Accepteer de cookies om deze video te kunnen bekijken Accepteer cookies

Kolommen

Nu gaan we een kolomlayout toepassen. Voor we onze kolom gaan creëren maken we eerst onze basis layout. Deze opzet kun je eigenlijk voor al je content in de toekomst kopiëren indien je niet met een achtergrondafbeelding werkt.

Begin met het toevoegen van een Groep. Met behulp van een groep kun je dit stuk layout altijd eenvoudig selecteren, positioneren én voorzien van eventuele achtergrondkleuren. Stel deze groep in op Volledige breedte.

Bij de instellingen van de groep ga je naar Responsive Dimensions (rechterbalk). Daarin klik je voor zowel Min padding (voor mobiel) als Max padding (vanaf tablet) op het link icoon om voor elke zijde een eigen waarde mogelijk te maken. Als voorbeeld kun je het volgende invullen:

Min padding: 40 – 20 – 40 – 20
Max padding: 120 – 40 – 120 – 40
(Padding: boven – rechts – onder – links)

Dit houdt in dat op mobiel of bij het verkleinen van je venster altijd 40 of 120 pixels ruimte wordt gereserveerd boven en onder je content en 20 of 40 pixels aan de zijkant. Plaats vervolgens nog een Groep binnenin de zojuist gemaakte groep.

De basis
Een groep in een groep, de basis en het uitgangspunt voor vele layoutvarianten. Op die manier kun je snel diverse layouts hergebruiken, van achtergrondkleuren voorzien en invullen met behoud van dezelfde witruimtes en marges die andere layouts hebben.

Waarom twee groepen?
De ‘buitenste’ groep bevat de marges en witruimtes en achtergrondkleur. De binnenste bevat enkel de content die je wenst te plaatsen. Deze groep is optioneel, maar wil je bijvoorbeeld binnen jouw containerbreedte wat content plaatsen in een kader, dan gaat deze binnenste groep je enorm helpen. Je hoeft deze enkel een kleur te geven en de gewenste padding en klaar!

Nu je de basis hebt staan kunnen we het blok Kolommen plaatsen.

Bij het toevoegen van dit blok krijg je een aantal suggesties voor aantal kolommen en de verdeling ervan. Maak hierin een keuze, bijvoorbeeld 3 kolommen, gelijk verdeeld. In je paginaoverzicht zie je dat er een overkoepelende ‘Kolommen’ groep wordt aangemaakt met daarbinnen een losse ‘Kolom’. De instellingen van beide zijn los van elkaar te beheren.

Kolom opmaken

Bij het toevoegen van dit blok krijg je een aantal suggesties voor aantal kolommen en de verdeling ervan. Maak hierin een keuze, bijvoorbeeld 3 kolommen, gelijk verdeeld. In je paginaoverzicht zie je dat er een overkoepelende ‘Kolommen’ groep wordt aangemaakt met daarbinnen een losse ‘Kolom’. De instellingen van beide zijn los van elkaar te beheren.

Tip
Kies in het begin het aantal gewenste kolommen, maar vul slechts één kolom met de inhoud tot deze precies naar wens is. Dupliceer dan deze kolom zo vaak als je wil en verwijder de lege. Dat scheelt alles telkens opnieuw plaatsen.

In onze kolom passen we een Koptekst (H2), een Paragraaf (als subtitel in een andere kleur) en een Paragraaf (als normale tekst) toe. We sluiten de kolom af met een Knop. Geef deze elementen een gewenste kleur en grootte. Tevreden? Dupliceer de Kolom dan tweemaal. Verwijder de resterende lege kolommen. Als het goed is heb je nu drie kolommen met dezelfde inhoud.

Elementen uitlijnen binnen je kolom

Verwijder enkele regels uit je middelste kolom. Zoals je ziet lijnen de elementen in je paginavoorbeeld niet lekker meer uit. Daar hebben we wat voor bedacht. Selecteer Kolommen (dus de overkoepelende groep waar de afzonderlijke kolommen in staan). In de rechterbalk bij instellingen vind je een instelling genaamd Verticaal uitlijnen. Activeer daar Mogelijkheid tot verticaal uitvullen inschakelen. Plaats nu boven (!) je knop in elke kolom het blok Verticaal uitvulblok. Dit blok is vergelijkbaar met een vulelement, maar je hoeft hier zelf geen hoogte in te stellen. De hoogte wordt automatisch berekend en de knoppen van de kolommen zullen allen, ongeacht tekstlengte, onderaan uitlijnen.
De reden dat we dit uitvulblok in elke kolom plaatsen is dat in de toekomst misschien een andere kolom langere of kortere tekst heeft. In dat geval is elke kolom die we plaatsen voorbereid op juiste uitlijning.

Bewerken en finetunen van jouw kolommen