HANDLEIDING INSUSITE

Transcriptie

1 HANDLEIDING INSUSITE Gentseweg Waregem T F info@crm.be -

2 2 INHOUD Inleiding 1. Wordpress Basics 1.1 Inloggen in het adminpaneel 1.2 Het Dashboard 1.3 De Admin balk 1.4 Editor 2. Pagina s 2.1 Nieuwe pagina De nieuwe pagina toevoegen in een menu 2.2 Pagina verwijderen Methode 1: langs de adminbalk Methode 2: langs het adminpaneel 2.3 Pagina bewerken Methode 1: langs de adminbalk Methode 2: langs het adminpaneel 2.4 Do s en Don ts bij het bewerken van een pagina 3. Pagina Header afbeeldingen 3.1 Een header afbeelding plaatsen op een pagina 3.2 Een header afbeelding verwijderen van een pagina 4. Blokken 4.1 Blokken overzicht 4.2 Een blok aanmaken 4.3 Een blok bewerken 4.4 Een blok verwijderen 4.5 Een blok toevoegen in een pagina Het blokken grid systeem 5. Insufeed 5.1 Nieuwsberichten: InsuNews 5.2 Tips: InsuTips 5.3 Acties: InsuActies 5.4 Links: InsuLinks 6. Insufeed berichten beheren 6.1 Een nieuw bericht publiceren 6.2 Een bericht verwijderen Methode 1: langs de adminbalk Methode 2: langs het adminpaneel 6.3 Een bericht bewerken Methode 1: langs de adminbalk Methode 2: langs het adminpaneel 7. Media 7.1 Afbeelding toevoegen 7.2 Een hyperlink maken 8. Probleem oplossen 8.1 Ondersteuning na oplevering 8.2 Het lukt niet 8.3 Ik wil/kan het niet zelf doen 8.4 Service contract 8.5 Telefonische ondersteuning

3 3 INLEIDING Klanten van CRM.art kunnen snel en gemakkelijk hun website bijhouden met een Content Management Systeem. Op het internet wordt een grote diversiteit aan de zogenoemde CMS en aangeboden. Deze systemen hebben ieder zijn eigen voor- en nadelen. CRM.art heeft gekozen voor Wordpress. Dit CMS systeem biedt veel mogelijkheden, maar blijft tegelijkertijd overzichtelijk en gemakkelijk te gebruiken. Omdat niet iedereen even handig en doortastend is met dit soort systemen is deze handleiding samengesteld. De belangrijkste basishandelingen worden helder en overzichtelijk toegelicht. Na het lezen en toepassen van deze handleiding ben je in staat om handelingen uit te voeren in de volgende categorieën: Het beheren van Pagina s (toevoegen, wijzigen en verwijderen) Het beheren van Blokken (toevoegen, wijzigen, verwijderen) Het beheren van Insufeed berichten (toevoegen, wijzigen, verwijderen), dit gaat om volgende berichten: 1. InsuNews 2. InsuTips 3. InsuActies 4. InsuLinks Afbeeldingen toevoegen en aanpassen Hyperlinks maken Voor iedere toepassing is een uitleg gemaakt waarmee je stap voor stap op weg geholpen wordt om je website aan te passen. Voordat we nader ingaan op de verschillende categorieën behandelen we eerst een aantal basishandelingen zodat je WordPress beter begrijpt en gemakkelijk kunt gebruiken. VEEL SUCCES MET HET BEHEREN VAN UW EIGEN WEBSITE!

4 4 1. WORDPRESS BASIC WordPress is een Content Management Systeem dat wordt geïnstalleerd op de server waarop de website wordt gehost. Hiermee is je website snel en gemakkelijk te beheren door simpelweg in te loggen op uw domein met je eigen WordPress-account dat door CRM.art aangemaakt is. Het zichtbare gedeelte op de website wordt door CRM.art als thema geprogrammeerd in WordPress. De inhoud van de website wordt hoofdzakelijk samengesteld door Insufeed berichten, blokken en pagina s. Hier komen we later op terug. 1.1 INLOGGEN IN HET ADMINPANEEL Voordat je aan de slag kan met het beheren van je website zal je eerst moeten inloggen in het adminpaneel, het gedeelte van de website waar alle inhoud wordt beheerd. Loop de volgende stappen door om in te loggen in uw WordPress-account: 1. Open een nieuw scherm of tabblad in je internetbrowser (bij voorkeur Google Chrome, te downloaden via: 2. Ga naar de homepage van de website, bijvoorbeeld 3. Achter de URL van de website voeg je het volgende toe: /admin, duw dan op Enter. Het adres in de browser zou er dan zo uit moeten zien: maar dan met je eigen domeinnaam. Je scherm zou eruit moeten zien zoals is weergegeven in de onderstaande afbeelding. 4. Voer je gebruikersnaam en wachtwoord in en klik op inloggen. Je wordt nu automatisch doorgestuurd naar het Dashboard, dat is het startscherm van het adminpaneel. TIP: De logingegevens kan je vinden in het opleverdocument van uw website (deze heeft u van CRM.art gekregen tijdens de opleiding). Indien u de gegevens niet kan terugvinden, gelieve dan contact op te nemen met CRM.art door een mail te sturen naar support@crmart.be. Afbeelding 1: Loginscherm WordPress

5 5 1. WORDPRESS BASIC 1.2 HET DASHBOARD Na het inloggen krijgt u het volgende startscherm* te zien: Afbeelding 2: Het Dashboard met links de menu om uw website te beheren. *OPMERKING: Dit scherm kan verschillen van website tot website. Dit startscherm wordt het Dashboard genoemd en bevat een kort overzicht van de website. U mag dit scherm echter meteen sluiten. Voor het beheren van de website zullen we namelijk gebruik maken van de Admin Balk. 1.3 DE ADMIN BALK Nadat u eenmaal ingelogd bent zal de browser dit onthouden (ook al heeft u het Dashboard gesloten). Open weer een nieuw scherm of tab van uw internetbrowser en surf naar uw website (de gewone site, niet het adminpaneel!). Deze keer is er een klein verschil, en dat is dat je een zwarte balk zult zien, bovenaan de website (deze zal ook te zien in het Dashboard en andere paginas in het admin paneel): Afbeelding 3: De homepagina van Archibald met de admin balk (in de oranje omlijning)

6 6 1. WORDPRESS BASIC 1. De 1ste optie is het logo van WordPress. De submenu bevat links naar allerlei WordPress diensten, maar die heb je helemaal niet nodig om de website te beheren. Wees alvast vrij om ze eens te bezoeken! Afbeelding 4: De WordPress diensten in de adminbalk 2. De 2de optie is een link waarmee je kan terugkeren naar het Adminpaneel. In het Adminpaneel kan je dezelfde link gebruiken om terug te keren naar de Website. Afbeelding 5: De link om te wisselen tussen het adminpaneel of website 3. De 3de optie is een belangrijk onderdeel van de admin balk. Deze wordt gebruikt om nieuwe inhoud toe te voegen aan de website. Hier komen we zeker op terug in de handleiding! Afbeelding 6: De link om nieuwe inhoud toe te voegen 4. De 4de optie is héél handig, daarmee kan je rechtstreeks de pagina of bericht waar u zich reeds bevindt aanpassen. In het adminpaneel zal deze link veranderen naar Pagina bekijken. Op die manier kan je snel heen en weer wisselen tussen de website en het adminpaneel. Afbeelding 7: De link om de pagina/bericht te bewerken/bekijken 5. De 5de optie gaat om SEO (Search Engine Optimization), dit is een onderdeel van de Wordpress Yoast! Plugin en dit draait om de ranking van uw website in Google en andere zoekmachines. De 1ste link ( Zoekterm-onderzoek ) in de submenu biedt diensten aan om uw SEO te verbeteren, de 2de link ( Analyseer deze pagina ) biedt diensten aan om de huidige pagina waar u op zit te analyseren. Afbeelding 8: SEO diensten 6. De 6de optie (helemaal rechts van de adminbalk) is het menu voor uw profiel. Daar kunt u uw profiel wijzigen of uitloggen van de website. Als u uitgelogd bent zal de admin balk ook verdwijnen en kunt u geen wijzigingen meer doen aan de site. Daarvoor moet u dan opnieuw inloggen. Afbeelding 9: Hier kunt u uw profiel beheren

7 7 1. WORDPRESS BASIC 1.4 EDITOR Bij het creëren of bewerken van inhoud maken we gebruik van een WYSIWYG (What you see is what you get) Editor. Als je WYSIWYG hoort, dan mag je meteen denken aan de iconen om uw inhoud te beheren. Zie volgende afbeelding: Afbeelding 10: De WYSIWYG editor met de basisopties. Als je bekend bent met het werken in een tekstverwerkingsprogramma zoals Microsoft Word zal je een aantal iconen uit de editor kunnen herkennen. Bovenstaande afbeelding bevat echter de basisopties, deze kan je uitbreiden door op het volgende icoon te klikken: Afbeelding 11: Het icoon om de WYSIWYG uit te breiden Dan ziet de WYSIWYG er zo uit: Afbeelding 12: De WYSIWYG editor met uitgebreide opties Voor de volledigheid volgt hier een overzicht van de iconen met bijbehorende betekenis: Geselecteerde tekst vet maken Geselecteerde tekst cursief maken Geselecteerde tekst doorhalen Opsomming maken met schijven Opsomming maken met decimalen Een Quote maken Een horizontale lijn toevoegen Links uitlijnen Centreren Rechts uitlijnen Koppeling invoegen/bewerken Koppeling verwijderen Volledig venster aan/uit Onderste rij iconen weergeven/verbergen Tekststijl wijzigen Uitvullen Plakken als platte tekst Inspringen verkleinen Inspringen vergroten Tabellen creëren Zoals je kan zien in afbeelding 10 en 12 kan je in de editor ook wisselen tussen volgende tabs: WYSIWYG ( What You See Is What You Get ) en Tekst. In de Tekst tab wordt de HTML (Hypertext Markup Language) code ook getoond (dit bepaalt de structuur en opmaak van de tekst in de editor). We raden aan om in de WYSIWYG tab te blijven en gebruik te maken van de iconen om uw structuur en opmaak te bepalen.

8 8 2. PAGINA S Zoals al eerder vermeld wordt een website opgebouwd uit pagina s en blokken. Een standaard website heeft een homepage, een aantal moederpagina s voor de menuonderdelen en meestal hebben de moederpagina s dochterpagina s. VOORBEELD: De website van Archibald Insurance (zie heeft een homepagina. Op de homepagina zijn een aantal menuonderdelen te zien zoals Over ons, Online services, Particulieren en Ondernemingen. Dit zijn moederpagina s, want wanneer er met de muis over Over ons wordt genavigeerd verschijnt er een Submenu met verschillende keuzes, dit zijn de dochterpagina s van Over ons. Afbeelding 13a en 13b: Moederpagina (hoofdpagina) en dochterpagina (subpagina van hoofdpagina). TIP: Een dochterpagina kan op haar beurt ook dochterpagina s krijgen, dit kan eindeloos doorgaan maar om het overzicht te bewaren ga je het best niet verder dan 3 niveaus. De hierarchie van moeder-en dochterpagina s kan ook gezien worden in de URL. Als je in bovenstaande afbeelding kijkt in het hoofdmenu zie je bijvoorbeeld dat Ons team een dochterpagina is van Over ons. Het Ons team pagina zou dan volgende URL hebben: Als het Ons team pagina op haar beurt weer een dochterpagina heeft, zal deze dochterpagina de volgende URL hebben: Deze URL s worden automatisch gegenereerd door Insusite bij het instellen van dochterpagina s. In volgende paragrafen wordt uitgelegd hoe je pagina s kan aanmaken, bewerken en verwijderen.

9 9 2. PAGINA S 2.1 NIEUWE PAGINA Het creëren van een nieuwe pagina kan op verschillende manieren. In eerste instantie maak je een pagina aan, vervolgens kan je voor de pagina een locatie instellen. Onderstaand wordt stap voor stap duidelijk gemaakt hoe je een nieuwe pagina kunt plaatsen en hoe je hiervan de plaatsing kunt instellen. 1. Zorg ervoor dat je ingelogd bent in het adminpaneel. Zie punt 1.1 in het begin van de handleiding. 2. In de zwarte adminbalk bovenaan ga je naar Nieuw, vervolgens klik je op Pagina. Afbeelding 14: Nieuwe pagina aanmaken. Je wordt dan doorverwezen naar het volgende scherm: Afbeelding 15: Titel ingeven 3. In dit scherm vullen we de titel van de nieuwe pagina in en kunnen we de inhoud toevoegen via de WYSIWYG editor. Daarnaast kunnen we ook instellen of deze pagina een dochterpagina moet zijn van een andere pagina.

10 10 2. PAGINA S Afbeelding 16: Titel en inhoud ingeven A. Vul hier de titel in B. Vul hier de inhoud in C. Stel hier in of de pagina een dochterpagina moet zijn van een andere pagina, selecteer Geen hoofd om geen dochterpagina in te stellen LET WEL: Op dit punt is de pagina aangemaakt met als status: concept, dit wil zeggen dat WordPress de pagina heeft opgeslaan, maar niet toegankelijk is op de Insusite voor bezoekers. Om de pagina toegankelijk te maken moet deze gepubliceerd worden. De status kan je uiteraard ook aanpassen: Afbeelding 17: Pagina-status aanpassen We overlopen ze allemaal eens: 1. Concept: De pagina is opgeslaan door WordPress en is toegankelijk in het adminpaneel, de pagina is echter niet toegankelijk op de website zelf. 2. Wachtend op review: Voor de pagina gepubliceerd wordt, moet deze eerst goedgekeurd worden door een account met meer rechten. In Insusite zal dit niet van toepassing zijn aangezien uw account het recht heeft om te publiceren. 3. Gepubliceerd: De pagina is toegankelijk voor bezoekers op de website.

11 11 2. PAGINA S Als u klaar bent dan mag de pagina gepubliceerd worden. Als u een nieuwe pagina creëert staat deze status niet tussen de status opties, dat doet u simpelweg door op de knop Publiceren te klikken. Afbeelding 18: Een pagina publiceren DE NIEUWE PAGINA TOEVOEGEN IN EEN MENU Proficiat! U heeft net een nieuwe pagina gemaakt, de pagina is nu beschikbaar in de website, maar de site weet nog niet waar hij die pagina precies moet plaatsen. De pagina zweeft als het ware ergens in de site, maar zit nog nergens in het menu. Langs de adminbalk kunnen we niet naar de opties van de menu. Daarvoor moeten we navigeren in het adminpaneel. Ga dus vervolgens te werk: 1. Ga naar het Dashboard van het adminpaneel. 2. Vervolgens navigeer je naar Weergave en dan naar Menu s Afbeelding 19: Een pagina toevoegen aan een menu

12 12 2. PAGINA S 3. Je ziet het volgende scherm, om een pagina toe te voegen aan de hoofdmenu volg je de stappen: Stap 1: Plaats kiezen Stap 3: Positie veranderen Stap 4: Opslaan Stap 2: Aan menu toevoegen Afbeelding 20: Een pagina toevoegen aan een menu 1. Selecteer het menu waarin je de pagina wilt toevoegen en klik vervolgens op Selecteren (hoogstwaarschijnlijk zal dit het Hoofd Menu zijn waarin je de pagina wilt toevoegen. In dit vak staan alle pagina s die in de website te vinden zijn. In het tabblad Meest recent zijn de pagina s gerangschikt van nieuw naar oud. Indien u de gezochte pagina niet meteen vindt kan je gebruik maken van het tabblad Zoeken. Daar zoekt u naar de titel van de pagina, deze zal dan automatisch tevoorschijn komen indien WordPress de pagina kan vinden. 2. Als je de pagina gevonden hebt zet je een vink naast de titel en klik je op de knop Aan menu toevoegen. 3. De pagina is onderaan toegevoegd aan het menu. Om de positie te veranderen, sleep je het blokje naar boven tussen de andere pagina s. TIP: Je zal merken dat je geholpen wordt door een gestipte vierkant die de positie voorspelt van de pagina, als je akkoord gaat met de positie laat je het blokje daarin vallen. Indien de pagina een dochterpagina is van een andere pagina (de moederpagina), dan laten we het blokje vallen onder de moederpagina, maar zorg ervoor dat de dochterpagina uitwijkt naar rechts zoals in de blokjes in de afbeelding. Zo creër je een hiërarchie in de menu. 4. Als je akkoord gaat met de positie van de pagina, dan slaan we het menu op door op Menu opslaan te klikken.

13 13 2. PAGINA S 2.2 PAGINA VERWIJDEREN Het is altijd mogelijk dat je een pagina wilt verwijderen omdat deze overbodig of verouderd is. Onthoud echter dat het beter is om de pagina te behouden en dat je best enkel de verwijzingen naar de pagina verwijdert op de website. Je weet immers niet of er mensen zijn die de inhoud van de pagina als nuttig beschouwen en de pagina als favoriet hebben opgeslaan in hun browser. Door een pagina te behouden zal deze ook vindbaar blijven in de zoekmachines. Er zijn verschillende manieren om pagina s te verwijderen, hieronder bespreken we 2 methodes: 1. Methode 1: langs de adminbalk 2. Methode 2: langs het adminpaneel METHODE 1: LANGS DE ADMINBALK Gebruik deze methode als je snel en gemakkelijk de pagina kan openen via de website. Als dit niet het geval is dan moet je de pagina openen langs het adminpaneel (punt 2.2.2). Om een pagina te verwijderen gaan we alsvolgt te werk: 1. Op de website zelf navigeren we naar de pagina. In de adminbalk bovenaan klikken we vervolgens op Pagina bewerken. Afbeelding 21: Pagina bewerken 2. Je komt terecht in het adminpaneel, klik hier volgens op de rode tekst Naar de prullenbak verplaatsen. Afbeelding 22: Naar de prullenbak verplaatsen

14 14 2. PAGINA S METHODE 2: LANGS HET ADMINPANEEL Om een pagina te verwijderen langs het adminpaneel gaan we alsvolgt tewerk: 1. Ga naar het Dashboard van het adminpaneel en navigeer langs de menu links naar Pagina s, klik dan op Alle pagina s. Afbeelding 23: Pagina verwijderen 2. Je komt terecht op het overzicht van alle pagina s van de website. Zoek de pagina dat je wilt verwijderen in het overzicht (rechtsboven kan je gebruik maken van de zoekfunctie indien nodig). 3. Ga met je muis over de titel van de pagina die je wilt verwijderen, onder de titel verschijnen enkele opties, klik vervolgens op Prullenbak. Afbeelding 24: Naar prullenbak

15 15 2. PAGINA S 2.3 PAGINA BEWERKEN Er zijn verschillende manieren om pagina s te bewerken, hieronder bespreken we 2 methodes: 1. Methode 1: langs de adminbalk 2. Methode 2: langs het adminpaneel METHODE 1: LANGS DE ADMINBALK Gebruik deze methode als je snel en gemakkelijk de pagina kan openen via de website. Als dit niet het geval is dan moet je de pagina openen langs het adminpaneel (punt 2.3.2). Navigeer naar de pagina via de website, vervolgens klik je in de adminbalk op Pagina bewerken. Afbeelding 25: Pagina bewerken Je komt uit op de volgende pagina in het adminpaneel: Afbeelding 26: Pagina bewerken A. Hier kan je de titel bewerken B. Hier kan je de inhoud bewerken C. Hier kan je nogmaals bepalen of de pagina een dochterpagina moet zijn van een andere pagina

16 16 2. PAGINA S Als je klaar bent met de aanpassingen van de pagina moet je de wijzigingen opslaan, dit doe je door op de knop Bewerken te klikken. Afbeelding 28: Pagina bewerken METHODE 2: LANGS HET ADMINPANEEL Om een pagina te bewerken langs het adminpaneel gaan we alsvolgt tewerk: 1. Ga naar het Dashboard van het adminpaneel en navigeer langs de menu naar Pagina s, klik dan op Alle pagina s. Afbeelding 28: Pagina bewerken 2. Je komt terecht op het overzicht van alle pagina s van de website. Zoek de pagina dat je wilt bewerken in het overzicht (rechtsboven kan je gebruik maken van de zoekfunctie indien nodig).

17 17 2. PAGINA S 3. Ga met je muis over de titel van de pagina die je wilt verwijderen, onder de titel verschijnen enkele opties, klik vervolgens op Bewerken Afbeelding 29: Pagina bewerken Je komt uit op de volgende pagina: Afbeelding 30: Pagina bewerken A. Hier kan je de titel bewerken B. Hier kan je de inhoud bewerken C. Hier kan je nogmaals bepalen of de pagina een dochterpagina moet zijn van een andere pagina Als je klaar bent met de aanpassingen van de pagina moet je de wijzigingen opslaan, dit doe je door op de knop Bewerken te klikken. Afbeelding 31: Pagina bewerken

18 18 2. PAGINA S 2.4 DO S EN DON TS BIJ HET BEWERKEN VAN EEN PAGINA Wat je beter wel en beter niet kan doen bij het bewerken van een pagina in WordPress: DO S DON TS TEKSTKOPPEN Koppen geef je aan door de tekststijl te wijzigen. Doorgaans kies je de stijl van Kop tekst 3 om een kop te maken omdat Kop tekst 1 en 2 al in gebruik zijn voor andere onderdelen van de website. TEKSTKOPPEN Maak geen koppen door de tekstgrootte aan te passen of door ze cursief, vet en/of onderstreept te maken! Dit verstoord het beeld en consistentie op de rest van de website. Gebruik hiervoor dus altijd de tekststijl. TEKST KOPIËREN EN PLAKKEN OPSOMMING Kijk uit met het kopiëren en plakken van tekst in het wysiwyg vak. Het komt veel voor dat tekstopmaak wordt overgenomen, maar het niet meteen zichtbaar is. Op de website is het dan wel zichtbaar en ziet het er niet mooi uit. Soms heb je met de rechtermuisknop ook de keuze om tekst te plakken in de modus plakken als niet opgemaakte tekst. Schrijf geen grote lappen tekst. Tekst lezen van een beeldscherm is meestal niet heel prettig. Hou hier dus rekening mee en zorg voor voldoende witregels en alinea s. Opsommingen kan je het best met bullets weergeven (geen streepjes).

19 19 3. PAGINA HEADER AFBEELDINGEN In uw Insusite heeft u de mogelijkheid om op elke pagina een afbeelding te plaatsen in de header. Indien er geen afbeelding voorzien is, zal Insusite automatisch een afbeelding toekennen. Zie de volgende 2 pagina van Archibald van Insurance: 1. De homepagina van Archibald Insurance: Afbeelding 32: Headerafbeelding 2. De infocenter pagina van Archibald Insurance: Afbeelding 32: Headerafbeelding 3.1 EEN HEADERAFBEELDING PLAATSEN OP EEN PAGINA Om een nieuwe afbeelding te plaatsen gaan we alsvolgt te werk: 1. Op de website navigeer je naar de pagina waar u een nieuwe header afbeelding wilt plaatsen, klik vervolgens op Pagina bewerken. Afbeelding 33: Pagina bewerken

20 20 3. PAGINA HEADER AFBEELDINGEN 2. Je komt in het adminpaneel terecht om een pagina aan te passen. Zoek onderaan rechts naar het blokje Uitgelichte afbeelding. Afbeelding 34: Een header afbeelding instellen 3. In dit blokje klik je op Stel uitgelichte afbeelding in. De mediabibliotheek wordt geopend. Indien uw afbeelding reeds in de mediabibliotheek zit, selecteert u de afbeelding en gaat u reeds naar punt 4. Als de afbeelding nog niet in de mediabibliotheek zit, dan moet u de afbeelding uploaden: Afbeelding 35: Bestanden uploaden A. Ga naar het tabblad Bestanden uploaden B. Klik op Bestanden selecteren en selecteer de afbeelding op uw computer die u in de header wilt C. Klik vervolgens op de blauwe knop Stel uitgelichte afbeelding in

21 21 3. PAGINA HEADER AFBEELDINGEN 4. De afbeelding is toegevoegd in de blok Uitgelichte afbeelding Afbeelding 36: Uitgelichte afbeelding selecteren 5. We gaan controleren of de afbeelding is toegevoegd. Klik op Pagina bekijken in de adminbalk Afbeelding 37: Pagina bekijken De afbeelding is toegevoegd in de header! Afbeelding 38: Pagina bekijken 3.2 EEN HEADER AFBEELDING VERWIJDEREN VAN EEN PAGINA Om een header afbeelding te verwijderen gaan we alsvolgt tewerk: 1. Op de website navigeer je naar de pagina waarvan u de header afbeelding wilt verwijderen, klik vervolgens op Pagina bewerken Afbeelding 39: Pagina bewerken 2. Je komt in het adminpaneel terecht om een pagina aan te passen. Zoek onderaan rechts naar het blokje Uitgelichte afbeelding met de afbeelding erin Afbeelding 40: Header verwijderen 3. Klik op de tekst Uitgelichte afbeelding verwijderen, de afbeelding verdwijnt en is meteen verwijderd van de pagina.

22 22 4. BLOKKEN Zoals eerder eens vermeld werd bestaat de website voornamelijk uit pagina s en blokken, dit leggen we eerst even concreet uit: Een pagina is opgedeeld in regio s, in deze regio s kunnen blokken geplaatst worden. Je kan zelf blokken aanmaken en inhoud toevoegen in deze blokken. De regio s kan je zelf niet aanpassen, deze worden vooraf geprogrammeerd door CRM.art. Bij het bewerken van een pagina kiezen we zelf welke blokken er in welke regio zitten en dit is kan voor elke pagina anders zijn. Hierbij een visuele voorstelling van 2 regio s en bijhorende blokken op de homepagina van Archibald Insurance : Afbeelding 41: Regio s In dit voorbeeld zijn er elk 3 blokken in de volgende regio s: 1. Above Content 2. Below Content Weet dat er op de website normaal meer regio s zijn, maar in dit voorbeeld zijn er 2. We leggen uit hoe je alle blokken kunt raadplegen en hoe je zelf blokken aanmaakt. Vervolgens zullen we een blok toevoegen in een pagina.

23 23 4. BLOKKEN Ga naar het Dashboard van het adminpaneel en navigeer naar Blokken, klik vervolgens op Alle blokken. Afbeelding 42: Blokken menu Afbeelding 43: Blokken overzicht Deze blokken zijn allemaal verspreid over alle pagina s van de website. U bepaalt zelf welke blokken in welke pagina s komen, hier komen we zeker nog op terug. 4.2 EEN BLOK AANMAKEN Ga naar het Dashboard van het adminpaneel en navigeer naar Blokken, klik vervolgens op Nieuwe blok. Afbeelding 42: Blokken menu Afbeelding 43: Blok toevoegen A. Hier vul je de titel in van de blok B. Hier vul je de inhoud in van de blok C. Vervolgens klik je op de knop Publiceren

24 24 4. BLOKKEN 4.3 EEN BLOK BEWERKEN Ga naar het Dashboard van het adminpaneel en navigeer naar Blokken, klik vervolgens op Alle blokken. Afbeelding 44: Blokken menu Afbeelding 45: Blokken overzicht Klik op de titel van de blok die u wilt bewerken en u krijgt het volgende scherm te zien: Afbeelding 46: Blok wijzigen A. Hier kan je de titel van de blok wijzigen B. Hier kan je de inhoud van de blok wijzigen C. Als je klaar bent met de aanpassingen klik je rechts op de knop Bijwerken

25 25 4. BLOKKEN 4.4 EEN BLOK VERWIJDEREN Opmerking: voor je een blok verwijdert, zorg ervoor dat deze blok niet in een pagina is toegevoegd. Ga naar het Dashboard van het adminpaneel en navigeer naar Blokken, klik vervolgens op Alle blokken. Afbeelding 47: Blokken menu Afbeelding 48: Blokken overzicht Klik op de titel van de blok die u wilt verwijderen en u krijgt het volgende scherm te zien: Afbeelding 49: Blok verwijderen Klik op de rode tekst Naar de prullenbak verplaatsen om de blok te verwijderen.

26 26 4. BLOKKEN 4.5 EEN BLOK TOEVOEGEN IN EEN PAGINA Ga naar het Dashboard van het adminpaneel en navigeer langs de menu naar Pagina s, klik dan op Alle pagina s. Afbeelding 50: Alle pagina s menu Afbeelding 51: Alle pagina s overzicht Je komt terecht op het overzicht van alle pagina s van de website. Zoek de pagina waar je een blok wilt toevoegen (rechtsboven kan je gebruik maken van de zoekfunctie indien nodig). Ga met je muis over de titel van de gekozen pagina, onder de titel verschijnen enkele opties, klik vervolgens op Bewerken. Eenmaal in het volgend scherm moet je naar beneden scrollen naar de witte blok Pagina widgets. A. In dit onderdeel moet Alleen deze pagina geselecteerd zijn. Dit zorgt ervoor dat we voor elke pagina andere blokken kunnen voorzien. B. Dit zijn alle WordPress widgets, deze kunnen we vergelijken met de blokken maar zij hebben elk een andere functie. De Widget die we hier nodig heeft de naam Widget Blocks Widget (zie afbeelding helemaal onderaan links). C. Dit zijn alle regio s die je op elke pagina zult zien. Zoals je ziet staan Above Content en Content below er tussen. Afbeelding 52: Pagina widgets

27 27 4. BLOKKEN We willen nu een blok in een regio slepen en we gaan alsvolgt te werk: A. Sleep de Widget naar de regio waar u de blok wilt, er komt een keuzelijst tevoorschijn. B. In deze keuzelijst selecteer je de blok die je wilt toevoegen, indien u de titel van de blok wilt tonen, vinkt u de optie Toon titel? aan. Daarna klik je op de blauwe knop Opslaan. Afbeelding 53: Blok in regio slepen en opslaan Nadat je op Opslaan geklikt hebt zal je merken dat er een veld tevoorschijn gekomen is: Afbeelding 54: CSS class De bedoeling van dit veld is om bepaalde codes in te vullen, deze codes bepalen hoe de blok er zal uitzien. Bij deze handleiding heeft u een bijlage ontvangen met alle verschillende codes en bijhorende uitleg, raadpleeg dat document om alle codes te bekijken. Naast de codes in bijlage zijn er extra codes die de breedtes bepalen van de blokken, dat systeem noemen we het grid systeem en bespreken we in het volgend hoofdstuk.

28 28 4. BLOKKEN HET BLOKKEN GRID SYSTEEM Hier wordt uitgelegd hoe het grid systeem werkt, met dit systeem kunt u de breedte van de blokken bepalen die u toevoegt in de pagina s. Het grid systeem werkt op basis van kolommen. Elke pagina van de Insusite kan opgevuld worden met een maximum van 12 kolommen. Dit zal duidelijker worden met een illustratie: Afbeelding 55: Grid systeem 12 kolommen In de illustratie ziet u 3 blokken, achter de blokken ziet u verticale strepen, deze strepen stellen de kolommen voor, we sommen elke blok even op, daarbij zetten we erbij hoeveel kolommen elke blok in beslag neemt: De Header: De header neemt de volledige breedte in beslag, dat zijn dus 12 kolommen De Algemene inhoud: De algemene inhoud neemt maar een deel in beslag, als we de kolommen op de achtergrond tellen, zijn dat 9 kolommen De Zijbalk: De zijbalk neemt op zijn beurt 3 kolommen in beslag. Als we de kolommen van de Algemene inhoud en Zijbalk samen optellen, komen we uit op 12 kolommen. Dat is de maximale breedte, hierdoor zullen de 2 blokken netjes naast elkaar staan in 1 horizontale lijn. Indien de Zijbalk 4 kolommen in beslag zou nemen, dan zou dit samen met de Algemene inhoud 13 kolommen in beslag nemen. Het volgende zou dan gebeuren: Zoals je ziet springt de Zijbalk automatisch naar een nieuwe lijn. Afbeelding 56: Grid systeem 12 kolommen

29 29 4. BLOKKEN EEN BREEDTE TOEKENNEN AAN EEN BLOK Bij het toevoegen van een blok aan een pagina waren we geëindigd bij het veld om een code in te vullen. Voor het toekennen van een breedte vullen we dus een code in, in het veld: Afbeelding 57: Breedte toekennen aan blok In de code bepalen we ook voor welk apparaat deze bedoeld is. Het verschil tussen de apparaten zit hem in de resolutie van het scherm. Want stel dat je 4 blokken naast elkaar moet bekijken op een mobiele scherm, dan zal de inhoud moeilijk leesbaar zijn. Voor elke resolutie vullen we dus een code in, zie volgende tabel: Kleine apparaten Mobiel (<768px) Kleine tabletten (>768px) Medium apparaten Computers (>992px) Grote apparaten Computers (>1200px) col-xs-# col-sm-# col-md-# col-lg-# # = het nummer hoeveel kolommen dit in beslag neemt (max 12) Stel dat we 4 blokken hebben aangemaakt, we hebben deze 4 blokken toegevoegd aan een regio in de pagina maar we moeten nog een breedte toekennen, hierbij beslissen we het volgende: Grote apparaten: hier mogen de 4 blokken naast elkaar staan in 1 lijn Medium apparaten: hier mogen de 4 blokken ook naast elkaar staan in 1 lijn Kleine tablets: hier zetten we 2 blokken per lijn Kleine apparaten: hier zetten we 1 blok per lijn In elke blok vullen we dan het volgende in het CSS class veld: col-xs-12 col-sm-6 col-md-3 col-lg-3 Uitgelegd: col-xs-12: 1 blok moet 12 kolommen in beslag nemen, dat is dus de volledige breedte, daardoor komen de 4 blokken onder elkaar col-sm-6: 1 blok moet 6 kolommen in beslag nemen, daardoor komen 2 blokken naast elkaar op 1 lijn col-md-3: 1 blok moet 3 kolommen in beslag nemen, daardoor komen 4 blokken naast elkaar op 1 lijn col-lg-4: 1 blok moet 3 kolommen in beslag nemen, daardoor komen 4 blokken naast elkaar op 1 lijn De blokken zullen zich dan op elke verschillende resolutie automatisch aanpassen.