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. ................................................................................................... 8 Voorbeelden Speciale lay-outs: ............................................................................................................. 19 Voorbeeld galerij met 4 afbeeldingen: .............................................................................................. 19 Voorbeeld galerij met 3 afbeeldingen: .............................................................................................. 19 Voorbeeld veel gestelde vragen ........................................................................................................ 19 Voorbeeld prijspagina ....................................................................................................................... 20 Voorbeeld portfolio pagina: .............................................................................................................. 20 Voorbeeld standaard menutekstpagina............................................................................................ 21 Voorbeeld content tabbladen pagina ............................................................................................... 21 Voorbeeld sociale media pagina: ...................................................................................................... 21 Voorbeeld contact pagina ................................................................................................................. 22 Beheren sliders ...................................................................................................................................... 24 Slider overzicht .............................................................................................................................. 24 Toevoegen slider ............................................................................................................................... 24 Voorbeeld slider: ........................................................................................................................... 26 Wijzigen slider ................................................................................................................................... 27 Verwijderen slider ............................................................................................................................. 27 Menu’s en submenu’s ........................................................................................................................... 27 Stappen c.q. volgorde aanmaken nieuw menu: .................................................................................... 28 Wijzig menu omschrijving ................................................................................................................. 32 Onderhoud soorten lay-outs: ................................................................................................................ 34
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. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
Galerij pagina met 4 afbeeldingen naast elkaar Galerij pagina met 3 afbeeldingen naast elkaar Veel gestelde vragen pagina Prijspagina Portfolio pagina Standaard menu tekst pagina Standaard menu tekst pagina met sidebar rechts Content tabbladen pagina Sociale media pagina Contact pagina default Witblokken om tekst in te zetten Kleurblokken om tekst in te zetten 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.
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 emailadres) Wachtwoord
Toets achter de url bv. www.domeinnaam.nl/inlogadres 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”:
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.
Wat betekenen de velden: Veldnaam Titel
Beschrijving De titel van de website, deze wordt ook in het tabblad getoond.
Contact e-mailadres
Het e-mail adres waar het ingevulde contact formulier naar toe wordt gezonden Het e-mail adres waar het antwoord naar toe kan worden gestuurd indien de klant wil reageren op de bevestiging. De naam behorende bij het e-mail 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
Reply to e-mailadres Reply to naam Default taal Keywords tbv zoekmachine Description t.b.v. zoekmachine Slider keuze Kleur styling Google maps api code
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 (zonder @) 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.
De belangrijkste Editor onderdelen. 1. 2. 3. 4. 5. 6.
Tekstopmaak Plakken vanuit Wordt of andere bestanden Linken naar andere websites Linken naar bestanden bv. .pdf Afbeeldingen Lightbox (afbeeldingen worden single of in serie over de website getoond)
Ad 1 Tekstopmaak Icoon
Resultaat Tekstuitlijning Tekst Tekst Tekst
Kop 1 Kop 2 Kop 3 Etc
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
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 X2 = Subscript boven basisregel van tekst X2 = 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
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
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
Linken naar bestand en
Klik daarna op OK en de link is toegevoegd.
Ad 5
Afbeeldingen Icoon
Beschrijving
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
Afbeeldingen
Upload of klik op een bestaande afbeelding
Haal gearceerde tekst weg. Pas de breedte aan naar bv. 200px
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
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
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:
Zoals u ziet wordt de website eronder ander weergegeven.
Voorbeelden Speciale lay-outs: Voorbeeld galerij met 3 afbeeldingen:
Voorbeeld galerij met 4 afbeeldingen:
Voorbeeld veel gestelde vragen
Voorbeeld prijspagina
Tekstblok boven de prijzen en de prijs tabellen zelf kunnen tekstueel worden aangepast.
Voorbeeld portfolio pagina:
Voorbeeld standaard menutekstpagina
Voorbeeld content tabbladen pagina
Voorbeeld sociale media pagina:
Voorbeeld contact pagina
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
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.
Instelling Deze slider gebruiken Volgorde Startdatum
Beschrijving Geeft aan of een slider (tijdelijk) mag worden gebruikt Geeft de volgorde aan van het tonen van de sliders 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.
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:
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 9999. 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”.
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.
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.
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:
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.
Vul alle benodigde velden in.
Wijzig menu omschrijving Ga naar Menu overzicht:
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.
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
a. Pagina setup als eerder beschreven Wijzig overall
b. Hier kunt u de reeds bestaande vragen wijzigen.
c. Toevoegen nieuwe FAQ (Frequently Asked Question= veel gestelde vragen)
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
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.
Na op Ja zetten zie je de prijs kolom
H3 betekent header 3
d. Teksten kunnen via de editor worden aangepast
4. Portfolio
a. Pagina setup zoals eerder besproken b. Wijzig overall
Aan en uitzetten, volgorde en verwijderen. c. Toevoegen nieuwe portfolio
Na toevoegen kunt u direct de tekst aanpassen
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.
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 99999. 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 www.ict-plus.nl/Test.php?menu=Test
