Wij hebben getracht het content management systeem zo eenvoudig mogelijk te houden. Hierdoor kunt u snel uw content op uw site aanpassen.

Transcriptie

1

2 Inhoud Inleiding:... 3 Speciale pagina lay-outs... 3 Vaste lay-outs:... 4 Vaste pagina s... 4 Inloggen... 4 Default settings:... 5 Algemeen:... 5 Wat betekenen de velden:... 6 Onderhouden van website teksten:... 7 Algemene kenmerken Editor:... 7 De belangrijkste Editor onderdelen Voorbeelden Speciale lay-outs: Voorbeeld galerij met 4 afbeeldingen: Voorbeeld galerij met 3 afbeeldingen: Voorbeeld veel gestelde vragen Voorbeeld prijspagina Voorbeeld portfolio pagina: Voorbeeld standaard menutekstpagina Voorbeeld content tabbladen pagina Voorbeeld sociale media pagina: Voorbeeld contact pagina Beheren sliders Slider overzicht Toevoegen slider Voorbeeld slider: Wijzigen slider Verwijderen slider Menu s en submenu s Stappen c.q. volgorde aanmaken nieuw menu: Wijzig menu omschrijving Onderhoud soorten lay-outs:... 34

3 Inleiding: Wij hebben getracht het content management systeem zo eenvoudig mogelijk te houden. Hierdoor kunt u snel uw content op uw site aanpassen. Aanpasbare onderdelen: Pagina teksten Footer teksten Paginaonderdelen aan en uit zetten (bv sliders) Volgordes veranderen Voor elke menuoptie is het mogelijk om de keywords, description en titel aan te passen Nieuwe content toevoegen Bestande content verwijderen Beheren sliders (toevoegen, verwijderen, wijzigen, aan en uit zetten) Wijzigen taaltabel Aanleggen web menu s en submenu s Default settings (o.a. sociale media) Speciale pagina lay-outs De website beschikt over een aantal speciale toevoegbare lay-outs. 1. Galerij pagina met 4 afbeeldingen naast elkaar 2. Galerij pagina met 3 afbeeldingen naast elkaar 3. Veel gestelde vragen pagina 4. Prijspagina 5. Portfolio pagina 6. Standaard menu tekst pagina 7. Standaard menu tekst pagina met sidebar rechts 8. Content tabbladen pagina 9. Sociale media pagina 10. Contact pagina default 11. Witblokken om tekst in te zetten 12. Kleurblokken om tekst in te zetten 13. Blockquotes (4x) Voor Website PRO 14. Formulier pagina s 15. Referentie pagina s Deze lay-outs kunnen bij elke zelf aangemaakte menuoptie worden geselecteerd. Geadviseerd wordt per menuoptie 1 lay-out te kiezen, maar meerdere mag ook. De Galerij pagina s kunnen niet samen met andere lay-outs en hebben een eigen tekst die boven de galerij kan worden geplaatst.

4 Vaste lay-outs: Elke pagina bestaat uit vaste lay-outs. Bv. het menu, een slider, een footer. Deze kunnen afzonderlijk worden een en uitgezet en van volgorde veranderen. Vaste pagina s Vaste pagina s zijn pagina s die wij voor u aanleveren en minimaal benodigd zijn om de website te tonen. De meest belangrijke is Home. Inloggen Na oplevering van Uw website kunt u deze gaan vullen met content. Hiervoor dient u te zijn ingelogd. De inlog optie is niet zichtbaar in de menuopties. Dit nodigt ongenode gasten uit om te proberen in te loggen. Inloggen gaat als volgt: U heeft van ons de volgende gegevens ontvangen Inlogadres Gebruikersnaam (meestal adres) Wachtwoord Toets achter de url bv. U komt op het inlogscherm en kunt inloggen met uw gebruikersnaam en wachtwoord. Na inlog kunt u beginnen met het aanpassen van de content. Er is dan een extra menuoptie BEHEER WEBSITE :

5 Default settings: Algemeen: De website vraagt om een aantal default instellingen. Deze zijn bij het opleveren van de site al voor u gevuld, echter u kunt deze altijd aar behoefte aanpassen. Elke pagina die u zelf heeft aangemaakt kunt u instellen. U kunt afwijkende keywords, description en titel opgeven wat weer handig is voor de vindbaarheid in zoekmachines. Het is van belang deze als eerste te controleren.

6 Wat betekenen de velden: Veldnaam Beschrijving Titel De titel van de website, deze wordt ook in het tabblad getoond. Contact adres Reply to adres Reply to naam Default taal Keywords tbv zoekmachine Description t.b.v. zoekmachine Slider keuze Kleur styling Google maps api code Het adres waar het ingevulde contact formulier naar toe wordt gezonden Het adres waar het antwoord naar toe kan worden gestuurd indien de klant wil reageren op de bevestiging. De naam behorende bij het adres. De default taal waarin de website wordt gestart als een bezoeker de site opent Maximaal 20 steekwoorden die op de site content slaan gescheiden met een komma en maximaal 100 karakters. De description tag is een verborgen stukje html-code dat het verschil kan maken in veel of weinig bezoekers via Google. Google toont deze informatie in de zoekresultaten Indien van toepassing kan tussen verschillende sliders worden gekozen. Indien van toepassing kan tussen verschillende kleur schema s worden gekozen. Resultaat anders kleurindeling op uw website. Indien bij het contactformulier een weergave van google maps moet worden getoond, dan heeft u een code van google nodig. Deze dient u

7 Google + code Facebook SDK code Facebook like URL Facebook like gebruiken Facebook pagina tonen Twitter follow code Twitter URL Twitter naam Twitter follow gebruiken Twitter tweets tonen code Twitter tweets tonen Pinterest follow button code Pinterest volgknop gebruiken Pinterest profiel code Pinterest profiel gebruiken hierin te geven. NVT Om Facebook onderdelen op de site te tonen is een Facebook SDK code nodig. Deze is als u bent ingelogd op Facebook daar op te vragen. U plakt deze hier in. T.b.v. de Facebook like button is een URL nodig. Deze is als u bent ingelogd op Facebook daar op te vragen. U plakt deze hier in. Het aan en uitzetten van de Facebook like button Het aan en uitzetten van het tonen van de Facebook pagina op de sociale Media pagina. Om de Twitter follow button op de website te tonen is een Twitter widget code nodig. Deze is aan te maken als u op Twitter bent ingelogd. De URL van uw Twitter account De naam van uw Twitter account Aan en uitzetten van de Twitter follow button De code om Twitter tweets te kunnen tonen op de sociale media pagina. Deze code is te genereren als u op Twitter bent ingelogd. Aan en uitzetten van het tonen van deze tweets. Om de Pinterest follow button op de website te tonen is een Pinterest code nodig. Deze is aan te maken als u op Pinterest bent ingelogd. Aan en uitzetten van de Pinterest follow button De code om uw Pinterest profiel te kunnen tonen op de sociale media pagina. Deze code is te genereren als u op Pinterest bent ingelogd. Aan en uitzetten van het Pinterest profiel op de sociale media pagina Onderhouden van website teksten: Het onderhouden van de content teksten werkt vrij eenvoudig. Er wordt gebruik gemaakt van de CKEditor. Dit is een web editor die een klein beetje lijkt op Word. Algemene kenmerken Editor: De editor is ingesteld op z.g. inline editing. Dit betekent dat wanneer u op een tekst klikt de editor voor die specifieke tekst worden geopend en u direct de tekst kunt aanpassen. Saven gaat automatisch wanneer u buiten het editor gebied klikt. Met eventueel F5 kunt u de pagina verversen. U kunt meerdere tekstgebieden tegelijk openen.

8 De belangrijkste Editor onderdelen. 1. Tekstopmaak 2. Plakken vanuit Wordt of andere bestanden 3. Linken naar andere websites 4. Linken naar bestanden bv..pdf 5. Afbeeldingen 6. Lightbox (afbeeldingen worden single of in serie over de website getoond) Ad 1 Tekstopmaak Icoon Resultaat Tekstuitlijning Tekst Kop 1 Kop 2 Kop 3 Etc Tekst Tekst Lettertype Selecteer een tekst en kies het lettertype. Het geselecteerde deel krijgt het gekozen lettertype. Letter grootte Selecteer een tekst en kies de letter grootte

9 Tekstopmaak Tekstkleur Selecteer een tekst en kies de tekstkleur Tekst achtergrondkleur Selecteer een tekst en kies de tekst achtergrondkleur Tekst opmaak B = Vet I = cursief U = ondertreept S = doorgehaalde tekst X 2 = Subscript boven basisregel van tekst X 2 Subscript boven tekstregel = Opmaak van geselecteerde tekst verwijderen. Ad 2 Knippen vanuit ander bestand Icoon Beschrijving Deze optie gebruikt u als u tekst met opmaak heeft gekopieerd vanuit bv. Word. U kunt deze dan met opmaak plaatsen in de editor Deze optie gebruikt u als u tekst met opmaak heeft gekopieerd vanuit bv. Word. U kunt deze dan zonder opmaak plaatsen in de editor Ad 3 Linken naar andere websites Icoon Beschrijving

10 Scherm: Type in het veld URL het adres van de website waar u naar toe wilt linken. Klik daarna op tabblad Doelvenster: Kies hier hoe U wilt dat de website wordt geopend. Meestal wordt gekozen voor nieuw venster. U site blijft dan geladen en de link wordt in een nieuw venster of tabblad geopend. Ad 4

11 Linken naar bestand en Icoon Beschrijving Hier kunt u linken naar een bestand i.p.v. een afbeelding. Selecteer eerst een tekst waarop de link moet worden geplaatst. Bv. Klik mhier om het bestand te downloaden. Klik vervolgens op het Link icoon. Kies bladeren op server Indien het bestand nog niet is geüpload, dan kunt u het tegelijkertijd uploaden. Na eventuele upload klikt u op het bestand

12 Linken naar bestand en Klik daarna op OK en de link is toegevoegd. Ad 5 Afbeeldingen Icoon Beschrijving

13 Afbeeldingen Klik eerst eenmaal op de plaats waar U de afbeelding in de tekst wilt hebben en daarna op het afbeelding icoon Klik op bladeren op server

14 Afbeeldingen Upload of klik op een bestaande afbeelding Haal gearceerde tekst weg. Pas de breedte aan naar bv. 200px

15 Afbeeldingen HSpace betekend dat de tekstnaast de afbeelding 5px vanaf de afbeelding wordt geplaats. Dit staat netter dan dat de tekst tegen de afbeelding aan staat. Ad 6 Lightbox

16 Lightbox Icoon Beschrijving Selecteer eerst een bestaande afbeeldingen. Bv. een afbeelding die u net heeft toegevoegd. Klik daarna op het lightbox icoon. Klik bladeren op server Doe eventueel een upload Selecteer een afbeeldingen

17 Lightbox Haal weer de gearceerde tekst weg. Geef een titel op (niet verplicht) Geef wel een galerijnaam op. Dit is handig als U meerdere afbeeldingen op 1 pagina plaatst. De bezoeker opent 1 afbeeldingen en kan bladeren tussen alle afbeeldingen avn dezelfde galerijnaam. Voorbeeld van een lightbox afbeelding:

18 Zoals u ziet wordt de website eronder ander weergegeven.

19 Voorbeelden Speciale lay-outs: Voorbeeld galerij met 3 afbeeldingen: Voorbeeld galerij met 4 afbeeldingen: Voorbeeld veel gestelde vragen

20 Voorbeeld prijspagina Tekstblok boven de prijzen en de prijs tabellen zelf kunnen tekstueel worden aangepast. Voorbeeld portfolio pagina:

21 Voorbeeld standaard menutekstpagina Voorbeeld content tabbladen pagina Voorbeeld sociale media pagina:

22 Voorbeeld contact pagina

23 Voorbeeld pagina met Sidebar: Voorbeeld pagina met Witblokken Voorbeeld pagina met Kleurblokken Voorbeeld pagina met Blockquotes (4x) Voor Website PRO Voorbeeld pagina met webformulieren Voorbeeld pagina met Referentie

24 Beheren sliders Slider overzicht Vanuit dit scherm kunt u sliders toevoegen, wijzigen en verwijderen Toevoegen slider De slider kent een aantal instellingen. Deze zijn van invloed op het tonen van de slider of niet of tijdelijk tonen van de slider.

25 Instelling Beschrijving Deze slider gebruiken Geeft aan of een slider (tijdelijk) mag worden gebruikt Volgorde Geeft de volgorde aan van het tonen van de sliders Startdatum Geeft aan vanaf welke datum de slider moet worden getoond I.c.m. Altijd tonen = Nee Einddatum Geeft aan de laatste dag dat een slider wordt getoond I.c.m. Altijd tonen = Nee Tijdelijke actie Is een indicatie voor de webbeheerder zelf. Talen Afhankelijk van meertalige website kunnen de talen worden gebruikt. Inleiding XXX Wordt getoond links van de afbeelding in de slider en moet als H1 tekst worden opgevoerd Beschrijving lang XXX Wordt getoond onder de inleiding. Mag niet als H1 worden opgevoerd. Na toevoegen is de slider vastgelegd en kan de afbeelding worden toegevoegd op het wijzigscherm.

26 U kunt vanuit verkenner een afbeelding hier naar toe slepen. Verstandig is de afbeelding van goed kwaliteit te kiezen. Afhankelijk van het type slider kan de afbeeldingsgrootte verschillen. Voorbeeld slider:

27 Wijzigen slider Hier kunt u de teksten van de slider aanpassen maar ook de instellingen en de afbeelding wijzigen. Scherm is hetzelfde als toevoegscherm. Verwijderen slider U kunt een slider verwijderen. De instellingen en de afbeelding worden verwijderd. Geadviseerd wordt een slider uit te zetten door gebruiken op N te zetten en de volgorde op De slider blijft dan bestaan en kan later weer worden gebruikt. Bv. bij een kerstgroet. Menu s en submenu s Bedenk altijd eerst hoe U de menustructuur wilt inrichten. U start altijd op het menu overzicht. Vandaar heeft u de mogelijkheid om toe te voegen, volgordes te wijzigen en een lay-out te kiezen c.q. te wijzigen Tip: Bepaal de naam van uw (sub)menu dusdanig dat het begrijpelijk is en ook voor Google relevant is. Bv. U verkoopt Laminaat. Noem uw menu of submenu dan Laminaat prijzen.

28 Stappen c.q. volgorde aanmaken nieuw menu: 1. Voeg een nieuw hoofdmenu toe Afhankelijk of uw site meertalig is vul dan ook Engels en Duits in. 2. U komt automatisch op wijzigen volgorde menu.

29 Bepaal de volgorde en of u het menu direct al wilt gebruiken. Gebruiken kan ook later pas worden gemuteerd. Als u geen submenu wilt kunt u een speciale pagina aan dit menu koppelen. Anders gaat u naar overzicht menu s en voer een submenu bij dit menu in. 3. Menu lay-out aanpassen Scroll naar het net toegevoegde menu en klik op Voeg lay-out toe.

30 Kies hier de juiste menu lay-out door deze aan te vinken. Deze kan later ook nog worden gewijzigd, door de bestaande uit te vinken en een nieuwe aan te vinken. Er zijn meerdere opties mogelijk. Echter een galerij kan alleen als galerij worden geselecteerd zonder andere lay-out. 4. Setup van de pagina settings en onderdelen aan en uitzetten Voorbeeld hoe werkt het met tabbladen:

31 Pagina settings: Vul hier zoveel mogelijk in, bepaal de volgorde (deze is meestal al wel goed) en zet eventueel onderdelen uit. Meestal wordt alleen de slider op subpagina s uitgezet, maar ook het kruimelpad (breadcrump) kan worden uitgezet. 5. Verder invulling pagina Zorg dat alle teksten zijn gevuld, anders ziet de bezoeker een lege pagina.

32 Vul alle benodigde velden in. Wijzig menu omschrijving Ga naar Menu overzicht:

33 Kies wijzigen voor de omschrijving die u wilt wijzigen. Toets de nieuwe waarden in en klik op wijzig. OPMERKING: Alle ingevoerde teksten, geüploade afbeeldingen etc. blijven gewoon bestaan.

34 Onderhoud soorten lay-outs: 1. Galerij pagina s: Sleep afbeeldingen vanuit verkenner naar dit vakje en de afbeeldingen worden geüpload. Meerdere tegelijk is mogelijk. a. Pagina setup: standaard voor elke pagina, zie punt 4 vorig hoofdstuk. 2. Veel gestelde vragen Wijzig overall a. Pagina setup als eerder beschreven

35 b. Hier kunt u de reeds bestaande vragen wijzigen. c. Toevoegen nieuwe FAQ (Frequently Asked Question= veel gestelde vragen)

36 De vraag is toegevoegd en direct zichtbaar. U kunt nu de vraag gaan bewerken. U kunt ook vragen verwijderen. Zie rode cirkel. Eventuele teksten kunnen worden aangepast door op de tekst te klikken. 3. Prijspagina

37 a. Pagina setup als eerder beschreven b. Wijzig overall Opties: Aan en uitzetten, volgorde. Type is indicatie voor uw zelf. Verwijderen zie rode cirkel. c. Toevoegen nieuw Prijs/Dienst Bij Ja wordt de prijs toegevoegd maar gebruiken staat op Nee.

38 Na op Ja zetten zie je de prijs kolom H3 betekent header 3 d. Teksten kunnen via de editor worden aangepast

39 4. Portfolio a. Pagina setup zoals eerder besproken b. Wijzig overall

40 Aan en uitzetten, volgorde en verwijderen. c. Toevoegen nieuwe portfolio Na toevoegen kunt u direct de tekst aanpassen

41 5. Standaard menuteksten Bij elk aangemaakt menu wordt een leeg menutekst aangemaakt. Met deze lay-out kunt u de menutekst ook tonen en dus bewerken. 6.

42 Handige tips: Pagina niet in menu zichtbaar maar via klik hier wel op te roepen. Maak in het CMS een pagina aan en laat gebruiken op N staan en geef deze bv. volgorde Dit kan ook een standaard volgorde zijn maar het is handig om al dit soort pagina s gegroepeerd bij elkaar te hebben. Als voorbeeld is menu Test aangemaakt. Vul deze op de gebruikelijke wijze met content. Ga nu naar een bestaande pagina om daar de link naar pagina Test Selecteer een stuk tekst. Klik op de link icoon Toets bij URL uw website adres met de menugegevens: Voorbeeld voor menu Test