Ons advies is om als volgt de site op te bouwen:

1. Ga naar Instelling en geef de site de juiste naam onder de tab Algemeen, deze naam wordt getoond in de browser.
2. Ga naar Prode options en vul de tabs aan met de juiste informatie.
   • Site Identity: upload het juiste logo
   • Fonts: alleen aanpassen als er een afwijkend font voor de site is
   • Scripts: Zal je niet gebruiken, is voor Prode intern
   • Store information: Vul alle relevante informatie zoals adres etc in
3. Ga naar Prode Blocks en voeg bij Settings eventueel kleuren aan, de meeste Eetwinkel gebruiken echter alleen zwart wit
4. Ga naar Reusable blocks en open footer om te zien of deze in orde is. Pas eventueel de foto en andere info aan. Deze footer staat onder elke pagina.
5. Nu is ons advies de basis structuur op te zetten. Ga naar pagina’s en maak alvast alle pagina’s aan uit het menu. Later kan je deze gaan vullen.
6. Als alle pagina’s ertussen staan ga je naar weergave> Menu. Kies voor het juiste menu in de dropdown bovenin (main menu). Maak deze volgorde in orde. Nu staat je menu ook vast.
7. Dan is het tijd je pagina’s te gaan invullen. Begin met het Prode Hero block of met het Prode Page Title blok.
8. Wanneer je klaar bent (of wanneer je begint) is het belangrijk om de pagina’s “Voorgedefinieerde blokken en Gutenberg blokken en deze handleiding pagina te verwijderen. Tevens moet je dit doen met al het beeld dat niet gebruikt wordt maar met de kopie mee kwam. Pagina’s die niet gebruikt worden moeten er allemaal uit om te voorkomen dat ze worden geindexeerd.

Om een menu kaart in pdf toe te voegen doe je het volgende.

• Je gaat naar DearPDF
• Je klikt op Add post
• Je voegt een titel toe (bijvoorbeeld Lunchkaart)
• Je voegt hier de pdf toe door op select pdf te klikken
• Upload de pdf
• In de tab general kies je bij viewer type Flip Book
• Klik op publiceren
• Ga naar All posts in DearPDF
• Achter de lunchkaart staat een shortcode, kopieer die code
• Ga naar paginas
• Maak een pagina aan (zie verderop hoe)
• Pas de template rechts aan van de pagina, kies hier voor full screen
• Voeg een blok toe met het kruisje
• Kies voor shortcode
• Kopieer hierin de short code die je hebt gekopieerd
• Publiceer de pagina
• Ga naar menus
• Selecteer het goede menu
• Voeg de pagina toe in het menu (zie verder op hoe)
• Je ziet de pagina nu in het lijstje staan
• Naast het item staat een pijltje naar beneden, klik hierop
• Vink aan: link openen in een nieuw tabblad *
• Je bent klaar

* indien je de keuze niet hebt om een link te openen in een nieuw tabblad: scroll helemaal naar boven. Rechts in de hoek zie je schermopties staan. Open deze en zorg ervoor dat de optie linkdoel staat aangevinkt. Dan verschijnt de optie vanzelf bij het menu.

Met de multisites moet je websites binnen het network aanmaken. Hiervoor maak je een copy van een bestaande site. hetfriethuys.eetwinkel.prodeconstructie.nl is helemaal in orde gemaakt om vanuit daar gekopieerd te worden. Echter in het begin ga je veel kleine details tegenkomen die nog aangepast moeten worden. Ons advies is dus niet alles tegelijk klaar te zetten. Bij de eerste site die je vult kan je aanpassingen hebben, als je deze ook doorvoert op de voorbeeld site kan je deze vanuit daar weer kopiëren en hoef je bepaalde aanpassingen niet meerdere keren te doen.

Wij moeten echter wel vooraf de server in orde maken voor het domein werkt. We zullen dit per 5 doen, zodat de clones werken. Hierover houden we contact.

Om een website te clonen dien je het volgende te doen:

• Ga naar mijn sites
• Kies netwerkbeheer
• Kies dashboard (dit is de hoofdinstallatie en is dus geen site van een eetwinkel)
• Je gaat naar NS Cloner
• In de pagina die je ziet vul je de volgende velden in:
  • Select cloning mode – selecteer Standard Clone
  • Select source – kies hier voor “Titel van de eetwinkel – hetfriethuys.eetwinkel.prodeconstructie.nl” in de dropdown
  • Bij create nieuw site vul je de titel in van de site, bijvoorbeeld Eetwinkel Boxmeer in het veld “Give the target site a title
  • Bij “Give the target site a URL” vul je de url aan. In dit geval vul je boxmeer in zodat het geheel https://boxmeer.eetwinkel.prodeconstructie.nl is
  • Verder hoef je geen aanpassingen te doen
  • Klik onderin op Query verzenden
  • Laat het systeem draaien een copy wordt gemaakt
  • Als het systeem aangeeft “finished” is deze klaar je kunt dan de site zien staan bij Mijn sites en je kan deze verder bewerken.

LET OP: Het kan zijn dat de site nog een beveiligingswaarschuwing geeft. Als ht goed is gaat deze melding in de nacht weg. Wil je eerder door dan kan je ons even mailen en dan lossen we het probleem op (wij moeten het certificaat een “zetje” geven). In sommige browsers kan je melding negeren. Zoals in firefox.

• Firefox melding negeren: Ga naar geavanceerd en klik op het risico aanvaarden en doorgaan

• Chrome melding negeren: Klik op geavanceerd en kies voor “doorgan naar url (onveilig)”

Hierbij een handleiding in PDF waarin je kunt lezen hoe je kunt controleren of er al een GMB pagina is en hoe je er één aan kunt maken. Zie bijlage.

Als je inlogt op Eetwinkel Enzo ga je naar Gebruikers > Nieuwe toevoegen.
Dan onder Nieuwe gebruiker toevoegen vul je achter Gebruikersnaam de gebruikersnaam in, achter E-mail vul je het e-mailadres in, dan achter Rol selecteer je in de dropdown Klant, Bevestigingsbericht overslaan en Andere Rollen laat je open staan en dan klik je op de blauwe Nieuwe gebruiker toevoegen button. Er wordt vanuit WordPress een mail gestuurd naar de nieuwe gebruiker om een wachtwoord aan te maken. Als dit is gedaan kan de nieuwe gebruiker inloggen op de website met het aangemaakte wachtwoord.

Om op de website in te loggen ga je naar www.domeinnaam.nl/wp-admin. Vul hier je gebruikersnaam en wachtwoord in.

Ga naar www.domeinnaam.nl/wp-admin. Klik op “wachtwoord vergeten” en vul hier je gebruikersnaam of e-mailadres in. Het systeem zal je een wachtwoord reset mail sturen. Volg de instructies van de mail om je wachtwoord opnieuw in te stellen.

Als je ingelogd bent kom je op het Dashboard van WordPress. Vanuit hier kan je verder. De linkerkolom is het belangrijkste, dat is namelijk het menu van de WordPress beheersomgeving.

Pagina’s, berichten, producten, categorieen, etc. komen niet vanzelf in het menu van WordPress. Deze dient handmatig toegevoegd te worden. Dit doe je door, in het linkermenu, naar “Weergave” te gaan en dan naar “Menus”.

Aan de linkerkant zie je veel verschillende opties. De optie die het meest gebruikt wordt is het toevoegen van gemaakte pagina’s. deze staat automatisch bovenaan en uitgeklapt.

Onder de tab meest recent staan de meest recente menu items. Staat het item hier niet tussen? Klik dan op Alles tonen. Vink de pagina aan die je aan het menu wilt toevoegen. Het systeem zet deze automatisch onderaan.

Door in de Menustructuur op het menu-item te gaan staan en aan te klikken (en vasthouden) kun je het menu item naar de juiste plek slepen. Ook kan je het item onder een andere hangen door deze een klein stukje naar rechts te zetten. Zo wordt een pagina een onderliggend menu item.

Voor het blok Prode Hero kan je gebruik maken van extra menu’s, deze zijn hier ook aan te maken. Bovendien kan je het menu selecteren dat je wilt aanpassen, staat deze er niet bij kan je ook nieuw menu aanmaken en deze oproepen in het Prode Hero Block.

In de mediabibliotheek kun je afbeeldingen en documenten uploaden. Deze worden hier allemaal getoond. Via nieuw bestand kunnen afbeeldingen toegevoegd worden in bulk. Het is ook mogelijk afbeeldingen via de pagina’s zelf toe te voegen. Hier vind je bij het onderdeel Inhoud bewerken – Afbeeldingen meer informatie over.

In het WordPress menu (linkerkolom) zie je een menu item pagina’s staan. Hier kan je alle “gewone” pagina’s van je website vinden, bewerken en toevoegen. Klik op pagina’s en je krijgt een overzicht van de pagina’s die je gebruikt.

• Een bestaande pagina openen doe je door op de titel van de pagina te klikken
• Een nieuwe pagina toevoegen doe je door bovenin te kiezen voor “Nieuwe pagina”
• Een pagina verwijderen doe je door op de titel te gaan staan en te kiezen voor “Prullenbak”
• Een pagina kopiëren (om er een nieuwe pagina van te maken) doe je door op de titel te staan en “Dupliceer” te kiezen. De pagina wordt dan gekopieerd en in concept gezet.
• Een pagina bekijken doe je door op het item te staan en voor “Bekijken” te kiezen.

Heb je aanpassingen in een pagina gedaan, vergeet dan niet te publiceren of updaten om de aanpassingen op te slaan!

Jullie gebruiken voor eetwinkel vooralsnog geen berichten. Indien jullie deze wel willen gaan gebruiken zullen we deze eerst in orde moeten maken.

In het WordPress menu item Berichten (linkerkolom) kun je alle nieuwsitems of blogs van je website vinden, bewerken en toevoegen. Wanneer je een nieuwsbericht toevoegt komt deze vanzelf in het overzicht onder het kopje nieuws aan de voorkant van de website.

Hoe bewerken / toevoegen?

Klik op Berichten en je krijgt een overzicht van de nieuwsitems die in de website staan.

• Een bestaand nieuwsitem openen doe je door op de titel van het bericht te klikken
• Een nieuw nieuwsitem toevoegen doe je door bovenin te kiezen voor “Nieuw bericht”
• Een nieuwsitem verwijderen doe je door op de titel te gaan staan en te kiezen voor “Prullenbak”
• Een nieuwsitem kopiëren (om er een nieuw bericht van te maken) doe je door op de titel te staan en “Dupliceer te kiezen”. Het bericht wordt dan gekopieerd en in concept gezet.
• Een nieuwsitem bekijken doe je door op het item te staan en voor “Bekijken” te kiezen.

LET OP!

Wanneer een nieuwsitem wordt aangemaakt wordt automatisch de juiste opbouw gecreëerd. Deze hoeft alleen maar ingevuld te worden. Het is echter wel erg belangrijk alles goed in te voeren.

• Wordt er op de nieuws overzichtspagina een afbeelding getoond? Dan moet de uitgelichte afbeelding ingevoerd worden. Het kan ook zijn dat de uitgelichte afbeelding gebruikt wordt als afbeelding die automatisch bij het nieuwsbericht geplaatst wordt. Je vindt de uitgelichte afbeelding in de rechterkolom onder het tabje “Bericht – Uitgelichte afbeelding”.
• Ook de categorieën en eventueel andere opties vind je in de rechterkolom onder het tabje “Bericht”.

Heb je alles ingevuld, vergeet dan niet te publiceren of updaten via de blauwe button rechtsboven om de aanpassingen op te slaan!

Bij projecten en nieuws kun je werken met categorieën. Sommige categorieën zijn al aangemaakt. Door categorieën mee te geven is het mogelijk om op de website te filteren. Dit kan een functie zijn voor de bezoeker, of om te zorgen dat bepaalde berichten op een bepaalde pagina getoond worden. Zo creëer je een overzichtelijk geheel.

Categorieën vind je meestal aan de rechterkant van de pagina in het tabblad “Pagina”, “Bericht” of “Project”. Hier kun je aanvinken in welke categorie je je item wilt plaatsen. Ook kan je hier zelf categorieën aanmaken.

Wil je de categorieën bewerken, ga dan naar het onderliggende menu-item “Categorieën” bij het content type (“Berichten” of “Projects”) dat je wilt toevoegen.

Hier zie je een overzicht met de al ingestelde categorieën. Om een categorie item te wijzigen klik je op de naam. Klik op “Nieuwe categorie toevoegen” om een nieuwe aan te maken. Een nieuwe pagina opent:

• Naam heeft eigenlijk geen uitleg nodig. Je kunt hier de naam van de productcategorie invullen.
• Slug wordt vanzelf aangevuld, hier hoef je niets mee te doen.
• Bij Hoofdcategorie kun je aangeven of er een categorie boven de categorie zit die je aan het maken bent.
• Bij Beschrijving kun je een beschrijving invullen voor de categorie. Maar deze wordt alleen getoond als dat specifiek is ingesteld. Meestal is dit niet het geval en kun je het beschrijving vak leeg laten.

Dan kan het zijn dat er nog enkele opties staan:

• Bij Weergavetype kun je aangeven wat er op de categoriepagina komt te staan voor je bezoekers. De optie “Standaard” is in de meeste gevallen de juiste keuze. In andere situaties wil je wellicht aangeven of alleen de producten of subcategorieën getoond mogen worden of juist beide.
• Bij Thumbnail kun je een afbeelding toevoegen voor de categorie. Deze afbeelding wordt gebruikt wanneer je bijvoorbeeld alleen de (sub)categorieën wilt weergeven op een pagina. Verder is het afhankelijk van het thema of het ook nog op de categoriepagina zelf wordt getoond.

Nu je alles hebt ingevuld kun je op “Nieuwe categorie toevoegen” klikken.

Bij alle aanpassingen die je in WordPress doet is het noodzakelijk je werk op te slaan of te publiceren. Rechtsboven zit een knop publiceren of update. Klik hierop om je werk op te slaan.

of

Onder dit menuitem vind je een aantal standaard instellingen en functies binnen de website. Als je die instellingen en data hier aanpast wordt dat door de hele website doorgevoerd. Hier vind je bijvoorbeeld de instellingen voor de adresgegevens, de instellingen welke fotos getoond worden als er geen foto gekozen wordt etc.

Niet alle opties worden in deze handleiding besproken, sommige instellingen spreken voor zich en andere instellingen kan je beter niet aankomen.

• Bij het tabje site identity kan je het logo uploaden voor de website en ook het icoon dat je in de browser tab zal zien.

Ga naar “Prode Options” en dan naar het tabje “Store information”. Hier zie je een overzicht van de gegevens die gewijzigd kunnen worden. Klik na het wijzigen op de blauwe button “Update”.

Bij de openingstijden is het belangrijk de regels te eindigen met <br /> om de volgende regel een enter te geven.

Je kan binnen de sites zelf kiezen voor verschillende fonts. In sommige gevallen willen jullie namelijk afwijken van de basis. De basis staat nu voor ingesteld bij het tabje fonts.

Via Google Fonts kan je nieuwe fonts toevoegen. Google Fonts geeft je dan een stukje code die je hier in kan plakken. Hoe je aan deze code komt kunnen je uitleggen, neem hierover contact met ons op.

Vervolgens kies je welk font je standaard wilt gebruiken bij je Kopteksten, je gewone tekst en wat je nog als alternatief zou willen gebruiken.

Ook kan je hier de standaard grote van je kopteksten veranderen. Let op, het veranderd hier alleen in de Gutenberg blokken en niet in de voor gedefinieerde ACF blokken.

Ga naar Prode settings en kies voor de tab Colors. Hier kan je via Add Color een kleur aanpassen die op je pagina’s binnen de blokken te zien zijn. Let op! Verander nooit de volgorde van de basiskleuren.

Ga in het WordPress menu naar “Prode Blocks” en dan naar “Template Parts”, hier kan je de footer aanpassen. Kies achter footer het reusable block dat je graag als Footer wilt gebruiken. Wil je je footer aanpassen? kijk dan in de handleiding bij Reusable blocks.

Gutenberg is de naam van de editor van WordPress. Deze is vrij nieuw. De editor helpt je om zelf de website heel flexibel in te richten. Gutenberg werkt met zogeheten “blocks”. In de oude Classic Editor van WordPress had je alleen een titel en vervolgens één groot tekstveld voor je content. Bij Gutenberg bestaat de hele pagina uit zogeheten “blokken”. Iedere nieuwe “paragraph” (alinea) is in Gutenberg een block. In de onderstaande handleiding leggen we de werking van de blokken uit.

Voor iedere soort content heb je in Gutenberg een “block”. Zo gebruik je een “YouTube-blok” om een YouTube-video op je pagina te plaatsen, of een “Paragraaf blok” om een alinea toe te voegen.

In eerste instantie ziet dit er een beetje overweldigend uit, maar als je eenmaal het gebruik van de blokken onder de knie krijgt, heb je heel veel flexibiliteit om je pagina precies te maken zoals je wilt.

Bij projecten en berichten wordt de opbouw vooraf bepaald als je een nieuw item aan maakt. Echter bij pagina’s niet, daar heb je alle flexibiliteit om zelf een pagina op te bouwen met Gutenberg blocks.

Wij raden aan om met de basis van een andere pagina te beginnen. Deze kan je kopiëren door op de titel van de pagina’s te gaan staan (in “Pagina’s”) en dan vervolgens op “Dupliceer” te klikken. WordPress maakt dan een kopie van die pagina en zet deze als concept klaar.

Je kan dan de nieuwe pagina openen en deze gaan bewerken. Echter wil je meer informatie toevoegen of een andere opbouw, dan kan je gaan werken met Gutenberg blokken.

Om een nieuw blok aan de Editor toe te voegen, klik je links bovenin op de “Plus”-knop en selecteer je het type “blok” dat je wilt gebruiken. Je kunt hier zoeken naar een blok, of direct één van de meest gebruikte blokken kiezen door er op te klikken.

Er zijn erg veel blokken voorgeprogrammeerd, het is een kwestie van proberen en ermee gaan werken. Ook wij gebruiken niet alle blokken. In deze handleiding leggen we de meest gebruikte blokken uit.

Blokken kun je onderverdelen in een aantal groepen. “Prode Blocks” zijn voor gedefinieerde blokken die wij maken, zodat deze goed bij het ontwerp passen en meteen doen wat ze moeten doen.

Daarna komen er andere groeperingen en die horen bij Gutenberg zelf.

Selecteer het blok, door erop te gaan staan en het geheel met een blauwe rand er omheen oplicht.

De instellingen voor dit blok kun je aanpassen in de rechterkolom onder het tab Blok. Op deze manier kun je eenvoudig speciale blokken aan je pagina toevoegen en aanpassen.

Elk blok heeft zijn eigen instellingen. Het voorbeeld hierboven betreft het kolommen blok waar we veel mee werken.

Het kan natuurlijk dat een bepaald blok niet voldoet. Je kunt een blok dan heel eenvoudig verwijderen door op het “More options”-icoontje te klikken (rechts naast het blok: de drie verticale puntjes) en vervolgens op “Verwijder blok” te klikken.

Eén van onze favoriete features van Gutenberg heet “Herbruikbare blokken”. Hiermee kun je een blok dat je hebt gemaakt opslaan als “herbruikbaar blok”, waardoor je deze makkelijk kunt hergebruiken in meerdere pagina’s en berichten.

Opslaan als herbruikbaar blok

Als je een blok hebt gemaakt dat je wilt gaan gebruiken als herbruikbaar blok, dan klik je naast het blok op het “More options”-icoontje (de drie verticale puntjes) en kiezen voor “aan herbruikbare blokken toevoegen”. Zodra je op deze knop klikt, kun je een naam invullen voor je blok en deze vervolgens opslaan.

Herbruikbare blokken gebruiken en aanpassen

Zodra je één of meerdere herbruikbare blokken hebt, kun je deze gebruiken door een nieuw blok toe te voegen in Gutenberg. Klik vervolgens op “alles bekijken” en dan op “Herbruikbaar” om je opgeslagen blokken te gebruiken.

Op deze manier kun je heel gemakkelijk elementen laten terugkeren op meerdere pagina’s.

Herbruikbare blokken aanpassen

Een herbruikbaar blok kun je aanpassen zodat deze op alle pagina’s aangepast wordt. Volg de stappen hierboven en kies voor de optie “Alle herbruikbare blokken beheren”. Je kan je blokken ook vinden in Prode Blocks > Reusable blocks.

In de website wordt veel gebruik gemaakt van kolommen. Zo kun je al je tekst verdelen over kolommen. Soms heb je er 2, soms 3 of 4. Dit is aan te passen in de instellingen in de kolom aan de rechterkant. Meestal niet veel meer dan 4 of 5. Het is prettig de tekst te verdelen over kolommen omdat tekst 100% breed in het scherm niet prettig leest.

Kolommen toevoegen

Voeg een nieuw blok toe, deze heet “Kolommen”. Selecteer het aantal kolommen dat je wilt. Dit is later nog eenvoudig aan te passen aan de rechterkant bij de instellingen. Zorg er dan wel voor dat wanneer je kolommen toevoegt, je de gehele tabel selecteert (met de blauwe rand er omheen).

Het is ook mogelijk om de breedte van de kolommen per kolom aan te passen. In dat geval selecteer je de kolom (met blauwe rand eromheen) en gebruikt de instellingen aan de rechterkant.

In de kolommen zet je vervolgens je titel, je paragraaf, je video en/of je afbeelding.

Voor websites gebouwd vanaf 2022
Er is standaard witruimte ingebouwd tussen de kolommen. Wil je de witruimte verhogen dan kun je dat via de instellingen aan de rechterkant doen. Dit kan voor het totale kolommenblok of per kolom apart.

Selecteer het blok kolommen of de betreffende kolom waar je padding aan wilt toevoegen. Klik op de “Link Sides” button en voer het aantal pixels in per zijde. Wanneer je in een invoerveld staat zie je in de afbeelding erboven welke zijde je bewerkt (die zijde wordt zwart getoond en de rest grijs).

Ook afbeeldingen hebben in Gutenberg een eigen blok. Zodra je dit blok toevoegt, krijg je direct de mogelijkheid om een afbeelding te uploaden of om er één te kiezen uit je WordPress-mediabibliotheek. Ook kun je met de icoontjes linksboven je afbeelding centreren of naar links of rechts uitlijnen. De beeldverhouding is te wijzigen en je kunt de afbeelding draaien.

Natuurlijk is het ook mogelijk om een link aan je afbeelding toe te voegen, zoals een link naar het mediabestand of naar een “custom URL”.

Zodra je een afbeelding hebt geselecteerd en op de instellingen knop (het tandwiel icoon langs de button Updaten) klikt, verschijnen in de balk rechts alle instellingen voor het afbeelding-blok. Dit zijn de instellingen die je ook uit de klassieke Editor gewend bent.

Zo kun je een “alt-tekst” invullen (“Textual Alternative”), de tekst die wordt gebruikt als de afbeelding niet getoond kan worden óf als een slechtziende je pagina laat ‘voorlezen’.

Je kunt ook een formaat kiezen voor je afbeelding. Standaard wordt je afbeelding als “Full size” getoond, maar je kunt ook een ander vooraf ingesteld formaat kiezen. Daarnaast kun je ook zelf afmetingen invullen (in pixels), zoals je dat gewend bent.

Er is ook een speciaal blok voor het toevoegen van titels (tussenkopjes en titels). Dit blok heet “Kop”.

Een kop staat meestal bovenaan de pagina, dat is een kop1 – H1. Ook heb je koppen tussen alinea’s in waar je een keuze in kunt maken: H2, H3 en H4. Deze kun je aanpassen door de titel te selecteren en dan te klikken op de H2 (of H3, H4, etc.) om de gewenste koptekst te kiezen.

Deze kopteksten zijn voorgeprogrammeerd en zien er per blok wat anders uit. Het beste is het uit te proberen.

Wanneer je tekst wilt toevoegen kies je voor het blok “Paragraaf”. Deze kun je overal gebruiken. Je kunt dit blok bijvoorbeeld ook toevoegen in je kolommen.

Het toevoegen van een YouTube-video is mogelijk met een zogeheten “Embed”-blok. Er zijn veel blokken voor embeds, zoals YouTube, Twitter, Instagram, SoundCloud, Spotify en Vimeo. Het meest gebruikte embed block is het “Youtube-blok”.

In het vlak kun je de link kopiëren van het youtube filmpje, het blok weet dan genoeg en je video wordt getoond.

Gutenberg heeft ook een blok waarmee je eenvoudig een galerij aan je bericht of pagina kunt toevoegen. Het enige dat je hoeft te doen is meerdere afbeeldingen uploaden of selecteren in je mediabibliotheek. Gutenberg maakt hier automatisch een galerij van. Je kunt aan de rechterkant instellen in hoe veel kolommen je je galerij wilt laten zien.

Er zijn meerdere mogelijkheden beschikbaar (afhankelijk van de geïnstalleerde plugins), ons advies: test ze uit en kies de mooiste uit.

Soms wil je wat extra ruimte tussen twee blokken. Dit kun je doen met het blok vulelement (space). Bij de instellingen aan de rechterkant kun je de hoogte in pixels instellen. Vaak is dit gewoon even uitproberen hoeveel pixels je moet instellen om de juiste hoeveelheid witruimte creëren.

Een accordeon biedt je de mogelijkheid veel informatie op een pagina te plaatsen, maar dan op een compacte manier. Deze handleiding bestaat bijvoorbeeld ook uit accordeon blokken.

Voeg het blok “Accordeon (Tekst)” toe via de +. In het grijze vlak voer je de titel/vraag in en in het witte vlak eronder de omschrijving/antwoord. Door op de + onder een accordeon-item te klikken voeg je eenvoudig een nieuw accordeon-item toe.

Via de instellingenbalk boven het accordeon kun je de tekst opmaak geven of bijvoorbeeld een link toevoegen. Bij de instellingen aan de rechterkant kun je de lettergrootte en de kleuren van de tekst en achtergrondkleur instellen. Ook kun je een foto of video toevoegen.

Prode-buttons

Op de plek waar je een button wilt toevoegen typ je de code met daartussen de tekst die op de button moet komen te staan: [prode-cta]Buttontekst[/prode-cta]. Dit doe je in een gewoon paragraaf blok.

Selecteer de tekst tussen de code, in dit voorbeeld Buttontekst. Klik op het Link symbool in het opmaakmenu boven het blok en geef aan naar welke pagina de button moet verwijzen.

Het blok buttons

Op de plaatsen waar je blokken kunt invoeren kun je ook voor het blok “Knoppen/Buttons” kiezen. Er komt dan een veld in beeld waar je de tekst op de knop kunt intypen en vervolgens de link toevoegen via het schakel icoontje in de toolbar (zie rood kader hieronder). Via de toolbar kan de button uitgelijnd worden.

In het rechter menu heb je dan de mogelijkheid om de stijl, kleur van de knop en kleur van de tekst te kiezen.

Voor websites gebouwd vanaf 2022
Aan de rechterkant kun kun je bij “Dimensions” ook de padding (ruimte om de tekst heen) instellen in pixels(px). Zie in de afbeelding het verschil wanneer je 15 px invoert.

Er zijn verschillende plaatsen en manieren om met links te werken.

Link binnen de tekst

Wanneer je binnen de tekst naar een andere pagina of website wilt verwijzen kun je het betreffende deel van de tekst selecteren, vervolgens klik je in de menubalk op de schakels en typt de url in. WordPress zet zelf https:// voor de url wanneer je dat niet zelf hebt gedaan. Bij een mailadres moet je voor het mailadres “mailto:” typen. . Dit moet er komen te staan:  mailto:XXX@XXX.nl . En dan op de XXX@XXX.nl het juiste mailadres.

Om bezoekers niet van je site kwijt te raken is het verstandig om altijd de optie “In een nieuw tabblad openen” aan te zetten wanneer je naar een andere website linkt. Als dit niet zichtbaar is, kun je het vinden bij de instellingen via het tandwiel wanneer je de link aan het bewerken bent.

Wanneer je de link wilt verbreken klik je op de schakeltjes waar een kruis door staat, wanneer er een actieve link is.

Link middels een knop

Zie bij knoppen/buttons toevoegen hoe je een knop/button aanmaakt. Het toevoegen van de link gaat op dezelfde manier als hierboven beschreven met een link in de tekst.

Link naar document

• Ga eerst naar de mediabibliotheek om het document te uploaden.
• Wanneer je vervolgens het document aanklikt krijg je een pop-up venster te zien. Hier zie je rechts bij de bestandsinformatie “Bestand url” staan met de knop Kopieer URL naar klembord. Klik daarop.
• Ga vervolgens naar de pagina of het bericht waar je het bestand wilt plaatsen. Maak een link aan (in de tekst of via een knop) en plak met Ctrl-V de link van het document. Zet de optie aan om een nieuw tabblad te openen.

Wanneer je de link wilt testen, selecteer dan de link en klik op het pijltje schuin naar boven naast de link.

Om de link te bewerken klik je op de link en vervolgens op bewerken om de url aan te passen.

Een document voeg je toe met behulp van een link. Bekijk hiervoor: Links toevoegen / beheren.

Om een gekleurde achtergrond over de gehele breedte van de website te krijgen doe je het volgende:

• Voeg blok “Cover” in.
• Kies de kleur (meestal moet je een “aangepaste kleur” instellen met de juiste kleurcode van je website kleuren)
• Kies bij icoontje uitlijning voor “volledige breedte”.

• Voeg vervolgens binnen dit Cover blok het blok “Container” toe.
• Binnen de container voeg je weer de andere blokken toe zoals “Kolommen” of “Paragraaf”.

Voor websites gebouwd vanaf 2022

In een cover blok kun je in plaats van een achtergrondkleur ook een achtergrond afbeelding instellen. Bij toevoegen van het blok krijg je de optie om een afbeelding te uploaden of uit de media bibliotheek te selecteren.

Wanneer je het Cover blok op de volledige breedte wilt tonen selecteer je in de toolbar bij “Change Alignment” de optie “Full Width”.

Je kunt aan de rechterkant bij Media Settings wat spelen met welk gedeelte van de afbeelding in beeld komt door met de muis het blauwe rondje te slepen.

Achtergrond afbeelding vastzetten
Dit doe je bij de instellingen aan de rechterkant, ga naar “Media Settings” en zet de schakelaar bij “Fixed background” om.

Overlay
Aan de rechterkant bij de instellingen kun je bij Overlay instellen of er een gekleurde laag over de afbeelding dient te komen. Soms kan dit fijn zijn om de kleurtoon van de website een beetje gelijk te houden, zodat het wat rustiger oogt. Ook kun je nog wat schuiven met de opacity (hoeveelheid transparantie).

Hoogte van de cover
Rechts bij de instellingen bij het onderdeel Dimensions kun je instellen wat de minimale hoogte van de cover dient te zijn.

Om een scheidingslijn te maken voeg je het blok seperator/lijn toe.

Je kunt de breedte van de lijn instellen door aan de rechterkant bij de instellingen te kiezen voor Default of voor Wide line. Ook kun je kiezen voor puntjes door Dots te selecteren; er worden 3 puntjes getoond op de voorkant van de website.

Bij de instellingen kun je ook de kleur van de lijn aanpassen bij het onderdeel Color. Klik op Background en selecteer daar een van de vooringestelde kleuren. Wil je een andere kleur, dan klik je op het vlak boven de gekleurde rondjes. In de regenboogbalk en het grote kleurvlak, kun je het rondje slepen om de juiste kleur te selecteren. Heb je een # kleurcode, klik dan op het icoontje rechtsonder en voer in de kleurcode in.

Het kan zijn dat een doorstuur wordt tegengehouden door de server. Er staat ingesteld dat een doorstuur op de server niet werkt als er op de link die je probeert door te sturen een bestand draait. Dus wanneer achter de link nog een actief pdf-bestand staat, werkt de doorstuur niet. Dit kun je oplossen door het bestand uit de mediabibliotheek te verwijderen en daarna de doorstuur op de link te zetten.

Als een Eetwinkel gebruik maakt van de Eetwinkel bestel-app, kun je instellen dat er een banner verschijnt op mobiel, zodra iemand de website bezoekt en de app nog niet heeft gedownload. Zo voeg je zelf de banner toe aan een Eetwinkel website:

Ga naar Plug-ins. Daar activeer je de plug-in Toepassingsbanner (Google PlayStore / AppleStore).

Als de plug-in is geactiveerd zal je links bovenin, onder Dashboard, Application Banner zien staan. Hier klik je op. In het nieuwe scherm vul je de volgende instellingen in:

APP-Store Links:
Apple Store Link: https://apps.apple.com/nl/app/eetwinkel/id966565378
Google Store Link: https://play.google.com/store/apps/details?id=nl.b_link.eetwinkel&hl=nl
APP-Package Name: nl.b_link.eetwinkel&hl=nl

APP-information:
APP-Name: Eetwinkel
APP slogan: Next to Food b.v.
APPICON URL: https://play-lh.googleusercontent.com/O7p-UOgkeIokdeDQs8rpD7ZZIaDKd3zfGgEyrT4x890lWykflucZoYpagFlHDojTEHk=w240-h480-rw

Background-color mag op zwart blijven staan, font-color maak je wit. Dan klik je op opslaan.
Om te voorkomen dat je 2 banners ziet moet de Apple Store code worden verwijderd. Dit doe je door te gaan naar PRODE Options > Scripts.
Controleer hier of dat de volgende code er nog in staat, zo ja, dan verwijder je de code. Het gaat om deze code: <meta name=”apple-itunes-app” content=”app-id=966565378, app-argument=https://apps.apple.com/nl/app/eetwinkel/id966565378″>
Als de code is weggehaald klik je op de blauwe Update button zodat de instellingen worden opgeslagen.

Dit zijn onze voorgedefinieerde blokken. Deze zijn speciaal op maat gebouwd voor Eetwinkel. Eetwinkel heeft een hele set met voorgedefinieerde blokken. De werking van deze en hoe ze eruit zien zijn te vinden op de pagina “Voorgedefinieerde Blokken (ACF) Blocks. Dit kan je hier vinden >

Blokken hebben 2 weergaven, een voorbeeld weergave en een bewerk weergave. Het voorbeeld laat bijna helemaal goed zien hoe het blok er aan de voorkant uitziet (details kunnen afwijken, dus controleer het altijd even online).

Hoe kies je de juiste weergave? Als je het block selecteert (met de blauwe rand eromheen) zal deze automatisch veranderen naar de bewerkbare modus, als je vervolgens een ander blok klikt zal het weer terug veranderen in de voorbeeld weergave.

Om toch flexibiliteit in blokken te behouden hebben we de meeste vormgegeven blokken ook klaar gezet als Gutenberg patroon. Het voordeel is dat je dan veel vrijer bent om aanpassingen door te voeren. We hebben de opbouw alvast klaargezet en nu kan je dat blok als patroon toevoegen en gaan vullen. Echter werken met Gutenberg is wat lastiger dan met ACF blokken.

Ons advies is in eerste instantie is eerst de Prode blokken te gebruiken en pas wanneer flexibiliteit nodig is over te stappen op Patronen. Deze zijn makkelijk door elkaar te gebruiken. Je hoeft dus niet te kiezen voor de een of de ander per pagina.