HANDLEIDING GOAT CMS
Inhoud Algemene handleiding Uitleg................................... 03 Inloggen................................... 04 Dashboard................................... 04 Aan de slag................................... 05 Menu................................... 06 SEO................................... 06 Topbalk................................... 07 Opties content................................... 07 Teksten................................... 08 Afbeeldingen................................... 08 Slider................................... 09 Parallax effecten................................... 10 Fotoalbums................................... 11 Formulieren................................... 13 Google Maps................................... 15 Pagina kop................................... 17 Footer................................... 18 Copyright balk................................... 19 info@goat.nl goat.nl 0223 74 60 30 2
Introductie Algemene handleiding Via de beheermodule in GOAT kan je zelf op eenvoudige wijze je website bewerken, uitbreiden of onderhouden. De beheermodule wordt in deze handleiding zoveel mogelijk stap voor stap uitgelegd. Om tekst te verduidelijken wordt gebruikgemaakt van voorbeeldafbeeldingen, in deze afbeeldingen wordt het beoogde onderwerp uitgelicht d.m.v. gekleurde kaders zoals hieronder afgebeeld. Vragen? Heb je na het lezen van deze handleiding nog vragen? Neem dan contact met ons op via 0223 74 60 30 of stuur ons een mail info@goat.nl info@goat.nl goat.nl 0223 74 60 30 3
Inloggen Om in te loggen in de beheermodule van jouw website gebruik je de link die je per e-mail hebt ontvangen in je internetbrowser. Vul daar de ontvangen gebruikersnaam en wachtwoord in. Je bevindt je nu op het dashboard van je website. Gebruikersnaam Wachtwoord Dashboard Klik hier om de website aan te passen Versie Uitloggen Je bevindt je nu op het dashboard van je website. Dat is niet zo heel spannend, dit is meer ter info. De werkzaamheden aan de website voer je direct uit op de website zelf. Klik op Ga naar website. LET OP Zodra je enkele minuten niet meer actief bent op je website, wordt je automatisch uitgelogd. Wil je weer inloggen ververs dan je tabblad en typ /admin achter de URL om weer in te loggen op je website. info@goat.nl goat.nl 0223 74 60 30 4
Aan de slag 1 2 3 1 2 3 Klik op het oog icoon om je website te previewen zonder uit te loggen. Klik op het hangslot icoon om terug te gaan naar het Dashboard. Klik op het exit icoon om uit te loggen zodra je klaar bent met het aanpassen van je website. De website De website is opgebouwd uit meerdere pagina s met elk zijn eigen functie. Elke pagina is ongeacht de inhoud opgebouwd uit een aantal vaste elementen. Iedere pagina bestaat uit een Header, Content blok en een Footer. Header De Header en Footer zijn op elke pagina gelijk. De content is per pagina verschillend. Header Deze bevat je logo, het menu en desgewenst social media links. Content Het content gedeelte kan gevuld worden met diverse elementen. Content Footer Doorgaans zal de Footer de NAW gegevens bevatten van je bedrijf of organisatie. Het gebruik van deze drie hoofd elementen leggen we verderop in de handleiding stap voor stap uit. Footer info@goat.nl goat.nl 0223 74 60 30 5
Menu SEO Het menu is aan te passen door op het tandwiel symbool te klikken. Je kan zelf je website instellen voor SEO. En nu denk jij, oh HELP! Het is niet zo eng en zeker niet ingewikkeld. Hieronder een voorbeeld hoe je het insteld. Maar eerst, wat is SEO? SEO is een Engels begrip dat staat voor search engine optimization, wat zoekmachineoptimalisatie betekent. SEO staat voor een verzameling van technieken die gericht zijn op het optimaliseren van websites of internetpagina s voor de vindbaarheid door zoekmachines. Met andere woorden, jij bepaalt de vindbaarheid van je site voor bv Google. Een nieuwe pagina toevoegen, klik op Pagina toevoegen. Vul een paginatitel in, zorg dat deze kort en beknopt zijn. Klik zoals eerder uitgelegd hebt op he tandwiel symbool en ga naar de pagina waar jij de SEO op wilt aangeven. In dit geval beginnen we met de Homepagina. Dus selecteer Home en klik op SEO. Vul een SEO titel in, deze titel zal ook zichtbaar zijn in het tabblad op je browser. In het voorbeeld is dat GOAT. Wanneer je een subpagina aan wilt maken klik je op het dropdown menu en selecteer je een hoofdpagina waaraan je de subpagina wilt koppelen. Hieronder een voorbeeld hoe dat er uit komt te zien. SEO zoekwoorden: dit zijn trefwoorden waarop je gevonden wilt worden. LET OP! Deze woorden moet in de tekst van de pagina voorkomen! Anders kan Google deze niet vinden. SEO pagina omschrijving: dit is een korte omschrijving die Google weergeeft in de zoekopdrachten, zie bovenstaand voorbeeld. Je mag van Google ongeveer 150 karakters, inclusief spaties en leestekens, gebruiken. Alles wat meer is wordt niet meer weergegeven. Ook hiervoor geldt dat de omschrijving ook op de pagina staat en dat zowel in de titel als omschrijving een zoekwoord moet staan. Vul je niets in dan pakt Google het eerste gedeelte van je tekst op de pagina. info@goat.nl goat.nl 0223 74 60 30 6
Topbalk Laat je bezoekers contact opnemen via telefoon of mail. Gebruik je social media? Stel ze in, zoveel als jij wilt. Tevens is er de mogelijkheid om jouw website meertalig in te richten. Vraag naar de mogelijkheden. Klik op het tandwiel om het aan te passen. Vul de gegevens in als in bovenstaand voorbeeld, dus telefoonnummers zonder spaties of koppletekens en complete URL links. Opties Content Het content gedeelte kan op vele manieren opgebouwd worden. De manier van opbouwen is wel gelimiteerd. Het content gedeelte wordt opgebouwd uit Secties. Als eerste zullen we je vertellen wat je met een Sectie kan doen. Een Sectie is niets meer dan een horizontale strook op je website die je kan vullen met diverse elementen zoals: Standaard; tekst en formulieren Sliders Parallax effecten Fotoalbums Google Maps Als laatste optie kan je gebruik maken van Sjablonen. Van repeterende opmaak elementen kan je een sjabloon maken. Deze zijn eenvoudig opnieuw te plaatsen, ook op willekeurige pagina s. Maak sjablonen aan, geef ze een naam en plaats ze waar en wanneer jij wil. Nieuw Sectie Gevuld met een slider over de volle breedte Nieuw Klik hier om een nieuwe Sectie te maken, bepaal zelf wat de inhoud wordt. Teksten, afbeeldingen, sliders, parallax effecten, fotoalbum, Google Map pagina kop of formulier.heb je een Sectie vormgegeven en wil je deze vaker gebruiken of op meerdere pagina s? Maak dan een sjabloon! Sectie Gevuld met een tekstkader over 2 kolommen Wijzigen Iedere Sectie kun je wijzigen. Zodra je er met je muis overheen gaat zie je een grijs, blauw en rood vlak. Je kan verslepen in volgorde, inhoud wijzigen of de gehele Sectie verwijderen. Let op: Verwijderen is definitief! info@goat.nl goat.nl 0223 74 60 30 7
Jouw website zal al geheel of gedeeltelijk gevuld zijn. Het eerste wat je waarschijnlijk zelf gaat doen zijn kleine wijzigingen aanbrengen op de pagina s. Daar heb je deze voor nodig. Per sectie zullen deze rechtsboven zichtbaar zijn wanneer je er met je muis overheen beweegt (mouseover). Als voorbeeld is er een nieuwe sectie geplaatst met Tekst blok (2), dit is een tekst blok die verdeeld is in 2 kolommen. Verschuif je secties Wijzig de inhoud Verwijder de sectie, let op dit is definitief! Het plaatsten of bewerken is eenvoudig, klik in de kolom die je wilt bewerken, zoals in het voorbeeld de linker kolom. Typ of plak je tekst en bewerk deze via de editor. Deze wordt getoond zodra je in de kolom klikt. Teksten Voeg een nieuwe sectie toe aan een bestaande pagina of maak een nieuwe pagina aan (zie pagina 6) en vul deze met de gewenste inhoud. Klik op het vlak om te starten. Teksten kunnen bewerkt worden via de editor zoals in bv Word. Ook vindt je nog meer tekst opties onder Formats. Afbeeldingen Afbeeldingen invoegen gaat als volgt, klik op het afbeelding symbool. Een nieuwe sectie kan met diverse items gevuld worden. Bovenaan staan de tabs met de beschikbare items. Als eerste tabblad wordt de Standaard optie getoond, dit is doorgaans de meest gebruikte. Hierin kunnen teksten en afbeeldingen geplaatst worden. Klik op het mapje info@goat.nl goat.nl 0223 74 60 30 8
Slider Voeg een bestaande afbeelding toe uit de map Afbeeldingen of klik op Bestand uploaden. Klik op Add file(s) om naar een bestand te bladeren op je computer of sleep een afbeelding naar het venster en klik op Start upload. Voeg een nieuwe sectie toe aan je pagina en klik op Sliders. In het voorbeeld maken we een Slider boxed. Klik op Plaats slider. De afbeelding staat nu klaar. Klik op de afbeelding die je wilt toevoegen. Mooi! Je hebt je eerste slider aangemaakt. Als het goed is zie je nu een grijs vlak met navigatie pijlen en aanduiding voor de hoeveelheid afbeeldingen. Voor de duidelijkheid markeer ik ze even. Klik rechtsboven op het pen symbool om verder te gaan. Je hebt nu de afbeelding geselecteerd, onderaan staan de afmetin gen van de foto. Wijzig deze in 100% zoals afgebeeld. Zo wordt de afbeelding ook in responsive weergave (mobiel en tablet) goed weergegeven. Stel een hoogte in zodat alle afbeeldingen even hoog zijn. De overige instellingen kan je standaard laten. Probeer ze zelf maar uit. De afbeelding staat nu op je website. Wil je toch een andere foto dan klik je op de afbeelding en voeg je op dezelfde manier een andere afbeelding toe. Klik op Upload en sleep de afbeeldingen daar naar toe. info@goat.nl goat.nl 0223 74 60 30 9
Klik op Afbeelding. Klik op het foto symbool en sleep je afbeelding op het venster. De foto s die je toegevoegd heb staan onder het tabje Slides, deze kan je verschuiven als je een andere volgorde wenst. Klik en sleep op het grijper symbool. Je kan zo de afbeelding verschuiven naar de gewenste positie. Meerdere foto s toevoegen? Gaar naar Upload en herhaal de eerdere stappen. Wil je foto s vervangen of verwijderen klik dan op het kruisje achter de foto. Klik op Opslaan om de bewerkingen te bevestigen. Je slider is nu gereed. Probeer zelf de opties uit zoals wisseltijd en hoogte. Kies wat bij jou past. Je hebt nu een parallax afbeelding. Deze werkt het beste wanneer je pagina wat langer is. Je hebt in ieder geval een verticale scroll op de pagina nodig om het effect zichtbaar te maken. Parallax effecten LET OP Parallax effecten werken alleen op desktop en laptop! Je kan een parallax effect heel goed gebruiken voor een Call to Action. Call to action is een Engelse term die gebruikt wordt in de marketing en reclame. In dit deel wordt je bezoeker uitgenodigd om een interactieve handeling uit te voeren. Bijvoorbeeld het doorlinken naar een andere pagina, formulier of aanbieding. Voeg een nieuwe sectie toe aan je pagina en klik op Parallax. We laten een Parallax boxed zien. Klik op Plaats parallax. Je ziet nu een leeg vlak op je pagina. Beweeg je muis over het lege vlak en ga naar het pen symbool. info@goat.nl goat.nl 0223 74 60 30 10
Klik op het pen symbool en vul een titel en subtitel in, geef een hoogte op en klik op Knoppen. Fotoalbums Wanneer je wilt laten zien wat je bezighoudt of wat de laatse ontwikkelingen zijn binnen je bedrijf, dan kun je overwegen om een fotoalbum aan te maken. Geef een knop titel op en een link adres op. Zorg dat je Call to Action aantrekkelijk is! Geef je knop titel een gerelateerde naam en niet alleen Verstuur. Kies een bijpassende titel zoals: Bel mij terug, Ik wil een afspraak maken of Ik wil gratis advies. De titel geeft dan ook een bevestiging waarnaar men op zoek is. In het voorbeeld kiezen we voor de mogelijkheid om meerdere fotoalbums aan te maken. LET OP Een interne link (link adres), is de naam van de pagina waar naartoe gelinkt moet worden. Het gedeelte na de / (slash). Een externe link moet altijd een compleet URL bevatten, zie voorbeeld. Je krijgt nu de melding dat er Geen galerijen geplaatst zijn. Geen paniek! Klik nu op het edit symbool. Je hebt nu een Call to action met kop en button. Kies een naam voor je album en klik op Opslaan. Mocht het nodig zijn, bijvoorbeeld vanwege de kleur van de foto, dan is het mogelijk om de tekst kleur van de titel en sub titel aan te passen. Klik op het penseel symbool en kies een kleur. Met de colour picker kan je iedere gewenste webkleur selecteren. Optioneel kan je een omschrijving toevoegen, klik op Opslaan. info@goat.nl goat.nl 0223 74 60 30 11
De hoogte van de weergave kan je zelf instellen. Wanneer je op een galerij klikt opent deze in op een nieuwe pagina. Je kunt zelf de hoofdfoto instellen, de overige foto s staan rechts. Sleep de foto s die je in je album wilt plaatsen op het vlak. Klik op de hoofdfoto of een willekeurige foto om alle foto s in slideshow te bekijken. Je hebt nu 4 foto s geplaatst. Je hebt nu 1 album gemaakt, bij mouse-over zie je de naam van het album. Op deze manier kun je meerdere galerijen aanmaken. In het voorbeeld hebben we er drie aangemaakt. Dat ziet er dan zo uit: info@goat.nl goat.nl 0223 74 60 30 12
Formulieren Er is eigenlijk geen website meer zonder een formulier. Vaak staat bij de contact gegevens ten minste een contactformulier. Reuze handig wanneer bezoekers contact met je willen opnemen en niet de hele dag aan de telefoon hoeft te zitten. Het formulier op de contactpagina is meestal al aangemaakt voor je. Wil je extra formulieren toevoegen voor bijvoorbeeld een aanvraag, bel-me-terug verzoek, inschrijving cursus, aanmelden voor een nieuwsbrief, enz, dan kun je dat zelf toevoegen aan je pagina. TIP! Hou een formulier zo klein mogelijk. Hoe minder velden, hoe beter. Het is bewezen dat het conversiepercentage groter is bij beknopte formulieren. Een enorm uitgebreid formulier met (te) veel verplichte velden doet vaak de moed in de schoenen zinken bij je bezoekers. En dat kan niet de bedoeling zijn, zo loop je potentiële klanten mis. Voeg een nieuwe sectie toe aan je pagina en klik op Formulieren. In het voorbeeld maken we een Formulier (standaard). Klik op Plaats blok. Bij Velden maak je de door jou gewenste velden aan. Vergeet niet om op bij iedere stap Opslaan te klikken voordat je verder gaat. Je hebt nu een leeg veld dat je moet gaan stylen. Klik op het pensymbool om de velden en toepassingen te bepalen. Je hebt nu een aantal velden aangemaakt. Ieder veld kun je achteraf nog aanpassen. Je kan ze verslepen in volgorde middels het grijper symbool of compleet verwijderen, kruisje. Let op, weg = weg! Wil je het veld zelf aanpassen klik dan op de titel. Bepaal de functie van het formulier en geef deze een titel. Bij verzendgegevens kies je waar het formulier naartoe gezonden moet worden. Plaats een afzend adres zodat je bezoeker ziet waar het heen gaat en vul een naam in, dat kan je bedrijfsnaam zijn of een persoon. info@goat.nl goat.nl 0223 74 60 30 13
Indien gewenst kan het uiterlijk bij Layout beperkt aangepast worden. Het eindresultaat bij deze instelling zou er als onderstaande afbeelding uit komen te zien. Bij Teksten kun je een bevestigingsbericht instellen voor een melding op de website of bevestiging via e-mail. Beide zijn ingevuld als voorbeeld. Als laatste is het mogelijk om bij Inschrijvingen te kijken wat er via het formulier verstuurd is. Klik op een bericht en zie wat er ingevuld is. Deze informatie komt uiteraard ook via de mail binnen. Onderaan type je de titel van de button in. Wanneer je alles ingesteld hebt, zal je formulier er standaard zo uit komen te zien. info@goat.nl goat.nl 0223 74 60 30 14
Wil je een formulier met tekst en/of een afbeelding, dan kun je kiezen voor de tweede optie, Formulier (met tekst). De formuliervelden worden op dezelfde wijze aangemaakt zoals eerder beschreven. Google Maps Een handig hulpmiddel voor je website, maak gebruik van Google Maps. Klik op Map en kies je gewenste formaat. Boxed of Fullwidt. (Op breedte van je tekst of op volle breedte van je scherm.) Wat er in dit geval veranderd ten opzichte van het standaard formulier is dat je het opdeeld in 2 kolommen. In 1 kolom komt het formulier en in het andere kun je tekst en afbeeldingen plaatsen. Als voorbeeld kiezen wij voor een Boxed weergave, klik op Plaats blok. Je krijgt nu een mooi grijs vlak. Dan behoort dit tot de mogelijkheden. Klik op het edit icoon en voer het gewenste adres in. Klik op Opslaan. Als weergave kun je kiezen uit Kaart of Satelliet, net wat jouw voorkeur heeft. info@goat.nl goat.nl 0223 74 60 30 15
In het voorbeeld hebben wij gekozen voor een satelliet weergave met een zoom van 12. De zoom zal je zelf uit moeten proberen om te kijken wat je voorkeur heeft. De zoom instelling is opgebouwd uit vaste stappen en door Google Maps zo ingesteld. Voeg een benaming toe aan de locatie pin. Edit nogmaals je Google Map, ga naar Locaties en klik op het adres. Weergave Kaart Weergave Satelliet Heb je meerdere locaties nodig? Dat kan! Klik op Locatie toevoegen en type een extra adres in. Per adres kan je een omschrijving of naam plaatsen. Dit is vooral handig bij meerdere locaties. Je bezoekers kunnen op de locatie pin klikken om te kijken welke locatie het is. Zo is het mogelijk om meerdere locaties op de kaart weer te geven. info@goat.nl goat.nl 0223 74 60 30 16
Pagina kop In dit hoofdstuk leggen we stap voor stap uit hoe je een pagina kop kan aanmaken. Nu hoor ik je denken, een wat? Het is een soort van balk bovenaan je pagina waar je een titel en afbeelding kan plaatsen om extra aandacht voor je pagina te vragen of puur voor het grafische effect. Klik op de edit knop en vul een titel ensub titel in, klik op Opslaan. Om een afbeelding toe te voegen (uploaden) klik je op het afbeelding symbool. Voeg weer een nieuwe sectie toe en klik op Plaats pagina kop. Sleep de gewenste afbeelding naar het venster. Je hebt nu een blanco sectie, let op: deze zal waarschijnlijk onder aan je al aangemaakte content geplaatst worden. Met het grijper symbool (het grijze vierkantje) kan je het blok in volgorde omhoog brengen op je pagina. Je afbeelding is nu succesvol opgeslagen onder een nieuwe naam. Klik op Opslaan om verder te gaan. info@goat.nl goat.nl 0223 74 60 30 17
Als je alles ingesteld hebt, zal dit het resultaat zijn. Footer In de footer staan de contact en naw gegevens. Deze zijn over het algemeen al voor je ingevuld. Zijn er wijzigingen, dan kun je deze eenvoudig aanpassen, klik op het editor symbool. Er is nog 1 optie die we niet behandeld hebben, hiermee kan je een overlay schaduw aanbrengen op de afbeelding. Ga naar de editor en kies bij Toon transparant gekleurde laag de optie Ja. Voor iedere kolom is er een tabblad waarin je de gegevens kan aanpassen. Klik op Opslaan en bekijk het resultaat. info@goat.nl goat.nl 0223 74 60 30 18
Copyright balk Iedere pagina wordt afgesloten met een copyright balk. Zoals in het voorbeeld tekst en links. Extra s Je hebt nu alle opties van GOAT doorgenomen, hiermee kan je alles verder aanpassen of aanvullen op je website. Bij het aanschaffen van deze GOAT website heb je in ieder geval een basis website afgenomen. Bij een basis website zitten alle standaard opties zoals afgesproken. Bewerken is gemakkelijk, klik op de tekst die je wilt aanpassen. Je kunt de tekst wijzigen door iets nieuws te type of door tekst toe te voegen. Bewerken kan via de tekst editor. Mocht je toch tot de ontdekking komen dat je onderdelen mist, het kan zijn dat je er niet eerder over nagedacht hebt om deze onlin te gebruiken of je onderneming is ondertussen gegroeid en zo ook jouw wensen voor de website. Schroom niet om ons om hulp te vragen, wij kunnen je diverse modules aanbieden die tegen meerprijs op de website kunnen worden ingebouwd. Maak ons je wensen kenbaar en wij kijken, vrijblijvend, samen met jou wat de mogelijkheden zijn en wat hiervan de kosten zijn. In overleg met jou zullen we na akkoord de extra s voor je inbouwen. Vragen staat dus vrij en er is vrijwel altijd een oplossing voor jouw wens. Laat het ons weten! Veel plezier met je nieuwe website! Heb je na het lezen van deze handleiding nog vragen? Dan kan je altijd gebruik maken van onze gratis support door te bellen met: 0223 74 60 30 of je stuurt een e-mail met je wensen/vragen naar: info@goat.nl HET SYSTEEM: DE ONTWIKKELAAR: info@goat.nl goat.nl 0223 74 60 30 19