Fijn dat je hebt gekozen voor FourBottles Design. Je website is in goede handen en is speciaal op maat gemaakt, zodat je helemaal zelf de controle hebt over de (toekomstige) inhoud. Deze handleiding geeft een algemeen beeld van welke opties websites in de regel bevatten en wat je ermee kunt. Het kan zijn dat een bepaalde optie niet aanwezig is in jouw site, of andersom. Stel dus gerust je vraag, mocht je er niet uitkomen.
Veel plezier met je website!
Dennis
Op een gegeven moment ontvang je van mij je inloggegevens. De inlogpagina bereik je door /wp-admin achter de url van de homepage in de adresbalk te plaatsen. Bijvoorbeeld: fourbottles.nl/wp-admin
Je wordt na het inloggen naar de homepage teruggebracht. Je ziet nu een zwarte balk bovenin je scherm en een plus- en potloodicoon aan de rechterzijde in beeld. De zwarte balk zul je niet veel nodig hebben, het is het snelste en gemakkelijkste om de tweede optie te gebruiken.
Klik op het potlood om de editor naar voren te brengen, hiermee kun je alles op deze pagina bewerken. Het plusje is voor het maken van een nieuwe pagina of bericht, waarover later meer.
De zwarte balk gebruik je om naar het dashboard te gaan (door op de websitenaam te klikken). Of om de pagina via de achterkant te bewerken. Je zult deze balk niet vaak nodig hebben, gezien het potloodje rechts veel gebruiksvriendelijker is.
Als je op het potlood hebt geklikt, schuift er een venster uit. Dit is de editor. Hierin vind je alle elementen die je kunt aanpassen, verdeeld in tabs. Veelvoorkomende tabs zijn:
Daarnaast vind je op de homepage ook vaak tabs die voor de gehele website gelden, bijvoorbeeld voor de Footer
De tab Editor bevat vaak een aantal secties. Klik op een sectie om deze uit te klappen en de bijbehorende opties te tonen. In de afbeelding hiernaast zie je een voorbeeld van een sectie met 2 tekstuele kolommen. De opties die je ziet, zijn afhankelijk van het ontwerp en hoe uitgebreid de website is.
Klik op Wijzigingen opslaan als je klaar bent.
De meest straight-forward sectie is een tekstuele sectie. Deze zijn voorzien van één of meerdere wysiwyg-editors, waarmee je dus niet alleen tekst, maar ook afbeeldingen of video’s kunt toevoegen.
Wat is een website zonder goede call to action? Banners zijn veelvoorkomend en bevatten vaak een achtergrondafbeelding, titel en een knop met link.
Kaarten zijn een soort kolommen, voorzien van een achtergrondvlak en vaak tekst, een afbeelding en button. Je kunt kiezen uit een aantal breedtes, wil je er bijvoorbeeld 3 naast elkaar tonen, dan kies je voor Kaarten 33%
Een accordion is een serie van in- en uitklapbare items. Het wordt vaak gebruikt voor vraag & antwoord, het is erg handig voor het tonen van een hoop informatie zonder dat het teveel ruimte in beslag neemt.
Tabs zijn qua functionaliteit vergelijkbaar met een accordion. Echter worden hier een rij labels getoond, waarbij het vlak ernaast verandert wanneer je op een label klikt. Een voorbeeld hiervan is het element waarin je deze tekst nu leest!
Dit spreekt voor zich, een rij met iconen met links naar social media kanalen.
Een slider is een veelvoorkomend onderdeel van een website. Met een tekstuele slider is het mogelijk om slides te plaatsen met een titel, tekst, afbeeldingen en video door middel van de wysiwyg-editor.
Vergelijkbaar met een tekstuele slider, maar speciaal bedoeld voor reviews van klanten. Het bevat vaak een quote, naam en soms ook een foto of bedrijfslogo.
Deze slider lijkt een beetje op een banner, met een achtergrond(afbeelding) over de gehele breedte van de website.
Toont een aantal items die onder een bepaalde categorie vallen, bijvoorbeeld nieuwsitems.
Voor het tonen van een verzameling afbeeldingen die zichzelf vergroten nadat je erop klikt.
Een van de belangrijkste onderdelen in het CMS, is de wysiwyg-editor. Wat een gekke naam, het staat voor what you see is what you get. Het is vergelijkbaar met een tekstverwerker, zoals Word. De meeste tools zul je dan ook gemakkelijk herkennen. Ik ga ze stuk voor stuk langs om de mogelijkheden te laten zien.
Gebruik deze knop voor het toevoegen van afbeeldingen en bestanden. Je kunt er ook een album/galerij mee maken, waarover later meer.
Selecteer een tekst en kies bijvoorbeeld Koptekst 3 om er een tussenkop van te maken.
Voor het vetgedrukt maken van teksten.
Voor het cursief maken van teksten.
Afhankelijk van het ontwerp van je website, wordt dit gebruikt om een quote te maken of tekst te benadrukken, bijvoorbeeld voor een introductietekst.
Voor het links uitlijnen van tekst.
Voor het centreren van tekst.
Voor het rechts uitlijnen van tekst
Selecteer een woord of stukje tekst, klik daarna op de schakel om een link toe te voegen. Het icoon ernaast gebruik je voor het verwijderen van een link.
Vaak staan hier door mij gedefinieerde opties. Selecteer een tekst of link en maak er een intro van, of bijvoorbeeld een button
Voor het doorhalen van teksten.
Voor het toevoegen van een lijn
tussen teksten
Wanneer je tekst kopieert vanuit Word of een andere website, komt er vaak ongewenste opmaak mee. Door middel van deze button voorkom je dit.
Selecteer een tekst en klik op de gum om tekst te herstellen van alle (ongewenste) opmaak.
Ga naar het uploadscherm en klik op bestanden selecteren, ga naar de map waar je afbeeldingen in staan en selecteer de gewenste afbeeldingen (1 of meerdere). Tip: je kunt ook afbeeldingen in het venster slepen in plaats van op ‘bestanden selecteren’ te klikken. Als je dat hebt gedaan, zullen de afbeeldingen worden geüpload naar de server. Ze worden tevens bijgesneden naar diverse formaten en geoptimaliseerd. Dit kan soms even duren.
Zoals je ziet, ben je nu overgegaan naar het tweede scherm. Dus voor verdere instructies, lees de volgende tab.
Als je een of meerdere afbeeldingen hebt geselecteerd, krijg je een aantal opties te zien aan de rechterzijde. Deze zijn alleen relevant bij het plaatsen van een afbeelding bij tekst, dus niet in een viewer/header/gallery/etc. Het volgende moet je instellen:
Vul een titel en alt-tekst in, dit is handig voor zoekmachine-optimalisatie. Je kunt ook een onderschrift toevoegen, maar pas wel op dat dit niet de opmaak verstoort.
Geef bij uitlijning aan of het plaatje links, rechts of gecentreerd moet komen te staan. Bij afbeeldingen die ongeveer net zo breed (of breder) zijn als de tekst, kun je het best Gecentreerd of Geen kiezen.
Link naar geeft aan wat er moet gebeuren als een bezoeker op het plaatje klikt. Kies voor Mediabestand als je de afbeelding wilt vergroten als iemand erop klikt. Is de afbeelding groot genoeg en wil je deze niet klikbaar hebben, kies dan Geen.
Bij Afmeting kies je een gewenst formaat.
Klik tot slot op de button invoegen in bericht
Heb je een afbeelding reeds geplaatst, dan kun je de instellingen wijzigen door op de afbeelding te klikken en vervolgens te kiezen voor het potloodje.
Behalve afbeeldingen, kun je ook bestanden uploaden. Klik in de editor op de plaats waar je een link naar het bestand zou willen plaatsen. Selecteer geen tekst, want deze wordt vervangen. Zet je cursor dus op een lege plek.
Volg dezelfde stappen als bij het uploaden van een afbeelding. De titel die je geeft in de Mediabibliotheek wordt de tekst die getoond wordt en waar men op kan klikken. Na het klikken op invoegen in bericht zal het linkje geplaatst worden. Deze kun je vervolgens zoals ieder ander linkje bewerken.
Video’s kun je beter niet toevoegen via Media toevoegen, omdat het de website onnodig zwaar maakt. Upload liever je video naar Youtube of Vimeo en kopieer en plak de link van de adresbalk in de editor. Bijvoorbeeld:
https://www.youtube.com/watch?v=JWWbtt4iPSU
Het systeem maakt hier automatisch een ‘embed’ van, handig nietwaar?
Wil je meerdere afbeeldingen in een grid tonen, dan kun je een galerij maken.
Klik op een geplaatste afbeelding en gebruik de blokjes in de hoeken om de afbeelding groter of kleiner te slepen.
Een standaardpagina bevat meestal niet veel meer dan:
Voor deze pagina’s gebruik je het plus-icoon rechts in beeld en kies je voor Nieuwe pagina maken.
Deze pagina’s zijn afwijkend, bijvoorbeeld een homepage, tarievenpagina of contactpagina. Ze zijn te herkennen aan:
Deze pagina’s dien je te kopiëren om ervoor te zorgen dat je alle secties behoud.
Om een pagina met specifiek ontwerp te kopiëren, klik je in de zwarte balk op Kopiëren naar een nieuw concept. Bij complexe pagina’s kan dit even duren. Als de pagina geladen is, kun je ‘m naar wens bewerken.
Vergeet niet de slug te veranderen van pagina-titel-2 naar gewenste-nieuwe-titel. Deze optie vind je onder de tab Algemeen
Om naar de menu-editor te gaan, ga je met je muis in de zwarte balk op je websitenaam staan, klik in de dropdown die verschijnt op Menu’s.
Mocht je in het dashboard zijn, dan kun je deze optie vinden onder Weergave > Menu’s
Onderstaand scherm zie je wanneer je in de menu-editor bent. Aan de linkerzijde zie je een aantal items die je kunt toevoegen aan het menu, dit kan variëren per website:
Rechts zie je de menustructuur. Hier kun je items op hun plek slepen nadat je ze hebt toegevoegd.
Helemaal bovenin zie staan: Een menu selecteren om te wijzigen. Hiermee wissel je tussen menu’s. Primary is vaak het hoofdmenu en het enige dat zichtbaar is in je website. Echter bevatten website’s soms meerdere menu’s. Gebruik daarvoor dus deze dropdown.
Aan Menu instellingen gelieve niet te komen, dit brengt de menu’s in de war.
Klik op het pijltje rechts in het item-blokje om meer opties te tonen. Hiermee kun je:
Over ons naar De praktijkDe overige opties die je ziet hebben geen meerwaarde.
Een categorie is verplicht, het zorgt er namelijk voor dat een bericht onder de juiste overzichtspagina valt. Dat kan bijvoorbeeld Blog zijn. Deze is vaak door mij al voorgedefinieerd, dus je klikt simpelweg op het veld, waarna de bestaande opties in beeld verschijnen. Het is ook mogelijk om meerdere categorieën aan een bericht te geven.
Een nieuwe categorie aanmaken doe je door middel van het plusje dat rechts verschijnt als je over het veld gaat met je muis.
Tags zijn labeltjes die je aan een bericht toekent, dit kan bijvoorbeeld handig zijn om bezoekers artikelen van gelijke aard te laten vinden. Ook worden ze gebruikt om relevante berichten aan elkaar te koppelen, mocht je website die optie bieden.
Tags toevoegen doe je op dezelfde manier als bij categorieën.
Deze optie vind je ook bij pagina’s. Je voegt hier een afbeelding toe die links van de tekst verschijnt, ter ondersteuning van het artikel.
Het verschil met pagina’s is dat deze afbeeldingen ook gebruikt worden op de overzichtpagina’s. Het is dus belangrijk om er eentje toe te voegen, gezien bezoekers meestal visueel zijn ingesteld.
Klik op het plus-icoon rechts in beeld en kies voor Nieuw product toevoegen.
simple voor de meest gangbare producten, variable voor producten met meerdere keuze-optiesvariable hebben gekozen, dan maak je hier eigenschappen aan. Bijvoorbeeld Kleur : Rood | Groen | Blauw. Volg na het publiceren van het product de instructies voor Variabele producten om hierin verder te gaanJa om alle verzendkosten -en mogelijkheden te negerenJa kiest, kun je een digitaal product aanbieden. De bezoeker ontvangt een downloadlink na het kopen van het product.Als je bij de vorige stap hebt aangegeven dat een product variable is en je hebt eigenschappen aangemaakt, dan worden binnen het product meerdere subproducten aangemaakt. Deze dien je elk te voorzien van een prijs. Dit kan enkel via de achterkant van de website, maar moeilijk is het niet:
Kortingsbonnen zijn handig; je kunt potentiële klanten trekken met acties en je kunt kortingscodes als cadeaubon verkopen. Ik ga hieronder uitleggen hoe je een kortingscode aanmaakt:
Zodra iemand een bestelling heeft geplaatst, krijg je een e-mailmelding. Alle bestellingen komen binnen in het dashboard onder Woocommerce > Bestellingen.
Een bestelling is altijd eerst in behandeling, je moet ervoor zorgen dat deze op afgerond wordt gezet. Uiteraard pas zodra de klant heeft betaald. Uiteraard kun je ook een bestelling annuleren of op terugbetaald zetten. Hieronder wat opties:
Afgerond
Je verkoop wordt gemonitord door het systeem, waardoor je gemakkelijk de statistieken kunt overzien. Ga hiervoor via het dashboard naar Woocommerce > Statistieken.
De switcher bevind zich in het navigatiemenu, maar alleen als er daadwerkelijk een vertaling aanwezig is.
In bovenstaand voorbeeld zie je /en/ in de url, dit betekent dat je in de Engelse versie zit.
Aan de achterkant van de website (dashboard), wordt de taal waarin je op dat moment werkt, aangegeven door een vlaggetje in de balk bovenin.
De kopie is gemaakt, maar let op: je zit nog in de Nederlandse taal. Om naar de vertaling te gaan, klik je op het potloodje die nu in de sidebar staat achter de taal die je wilt bewerken.
BELANGRIJK: Je ziet een blauw vlak met een knop Afzonderlijk vertalen, klik hier op, anders wordt de Nederlandse vertaling overschreven!
Je hebt nu succesvol een kopie gemaakt. Ga nu terug naar de voorkant van de website, om op de gewoonlijke manier de inhoud te bewerken.
WINKEL:
Marktstraat 38c
4921 BG Made (N.Br.)
Slagerij: 0162 68 75 41
Catering: 06 53 37 58 02
OPENINGSTIJDEN:
Maandag:
van 10.00 tot 18.00 uur
Dinsdag/Woensdag/Donderdag/Vrijdag:
van 09.00 tot 18.00 uur
Zaterdag:
van 08.00 tot 16.00