Contact

Het contactblok is een blok ontworpen door Noeste IJver om de contactgegevens weer te geven.

Let op: dit blok is ontworpen in combinatie met het ‘Pagina: contact‘ sjabloon. In een gewone pagina geeft dit blok ongewenst gedrag (bugs).

1. Hoe voeg ik het blok toe? #

Pas (indien nodig) eerst de template aan.

Zoek het kopje ‘Samenvatting‘ in het tabblad ‘Pagina‘. Kijk wat er achter ‘Template‘ staat. ‘Pagina’s‘ is het standaard template. Klik hierop om een keuzemenu te openen en kies voor Pagina: Contact. Je hebt nu de contactpaginatemplate ingesteld.

Klik vervolgens op het + icoon in de hoofdnavigatie of in het content gebied. Typ ‘contact‘ en klik op het contactblokicoon om het toe te voegen.

Let op: het kan zijn dat het contactblok zelfs in het ‘Pagina: contact‘ sjabloon niet juist wordt weergegeven. Dit is een hardnekkige bug waarvoor we een workaround hebben.

Los deze bug op door op dit icoon ( Icoon gereedschappen van de Gutenberg blok editor ) te klikken. Hierdoor wordt de ‘Update‘ knop actief. Klik vervolgens op ‘Update’ en de bug is verholpen.

2. Blokwerkbalk #

Werkbalk contactblok — De werkbalk van het contactblok

Selecteer het blok zodat de blokwerkbalk (erboven) weergegeven wordt. Hieronder leggen we uit wat elke functie in de blokwerkbalk doet.

2.1. Verander blokuitlijning #

Verander hiermee de uitlijning naar:

Geen
Wijd
Volle breedte

2.2. Kies een richting/variatie #

Hier vind je een keuzemenu met verschillende varianten van het contactblok. Kies een variant die het beste bij jouw content past:

1.1 basis: een basisopzet met de contactgegevens links en een afbeelding rechts.
1.2 basis google maps: de basisopzet met de contactgegevens links en een Google Maps locatie rechts.
2.1 basis img_hero: een hero afbeelding (opvallende afbeelding op de achtergrond) met de contactgegevens eroverheen aan de linkerzijde.
2.3 basis img_hero reversed: een hero afbeelding (opvallende afbeelding op de achtergrond) met de contactgegevens eroverheen aan de rechterzijde.
Een opzet zonder columns: een hero afbeelding (opvallende afbeelding op de achtergrond) met de contactgegevens eroverheen aan de linkerzijde. In plaats van kolommen is hier gebruik gemaakt van een omslagafbeelding, breadcrumbs navigatie en de contactgegevens in een cardblok.

2.3. Meer opties #

Onder dit icoon vind je meer bewerkingsfuncties zoals:

Dupliceren
Verwijderen
Invoegen voor
Invoegen na
Bewerken in HTML

Hiervoor hebben we een apart overzicht gemaakt op deze pagina. Zoek naar de functie die je wilt gebruiken.

3. Blokinstellingen #

De blokinstellingen zijn verdeeld in twee tabbladen: instellingen ( Instellingen icoon in blokinstellingen tabblad. ) en stijlen ( Stijlen icoon )

3.2. Instellingen #

Pas hier de werking van het blok aan.

3.2.1. Geavanceerd #

Bloknaam

Pas hier de naam van het blok aan. De bloknaam vind je terug in het ‘Document overzicht‘.

Extra CSS-klasse

Gebruik dit invulveld om extra CSS-klassen toe te voegen.

3.1. Stijlen #

Pas hier de opmaak van het blok aan.

3.1.1. Kleur #

Kies de kleur van de tekst, link en/of de achtergrondkleur. Na het klikken opent een submenu met twee tabbladen: ‘effen‘ en ‘kleurverloop‘.

Effen

Hier heb je de keuze voor de themakleuren (ingesteld door de ontwikelaar van Noeste IJver) en standaardkleuren.

Kleurverloop

Kies meerdere aangepaste kleuren door op een plek in het balkje te klikken om een kleur submenu te openen en een kleur te kiezen. Het kleurverloo pgaat over in de kleur die je op een bepaalde plek in de balk gekozen hebt. Je kunt kiezen voor een ‘Lineair kleurverloop‘ (van links naar rechts) of een ‘Radiaal kleurverloop‘ (vanuit het midden naar buiten).

Standaard en hover

Na het klikken op ‘Link‘ opent een submenu met twee tabbladen:

Standaard: Staat voor de kleur van de link die altijd in beeld is.
Hover: Staat voro de kleur die verschijnt als je met je muis op de link gaat staan.