Aan de slag met het Sitewise Platform

Transcriptie

1 Aan de slag met het Sitewise Platform Met Sitewise bouw je supersnel op basis van standaard technologie en functionaliteit uitgebreide websites. Door middel van de kant en klare templates, pagina s en functionele blokken kun je direct en zonder technische kennis de websites van jouw klanten in elkaar klikken. Indien gewenst kunnen we jouw Sitewise websites voor je uitbreiden met maatwerk functionaliteit. Praktisch alles is mogelijk. Iedere Sitewise website wordt continu voorzien van de laatste techniek en functionaliteit. Wanneer wij nieuwe functies hebben ontwikkeld voor Sitewise kan iedere Sitewise klant hier direct over beschikken. Sitewise betekent het gemak van standaard functionaliteit gecombineerd met oneindige maatwerk mogelijkheden. Daarbij krijgt iedere Sitewise omgeving automatisch nieuwe functies welke je direct kunt gebruiken in jouw website. 1

2 Inhoudsopgave Aan de slag met het Sitewise Platform Inhoudsopgave Waarom Sitewise YouPrint Zo werkt het / aan de slag Sitewise Modules De In page editor Een pagina aanmaken Sandbox: flexibel pagina s indelen In pagina designer Beschikbare blokken Formulieren maken Zoekmachine Optimalisatie Support 2

3 Waarom Sitewise Sitewise is het platform voor designers/marketeers die: Professionele websites willen leveren aan klanten Die snel willen kunnen leveren Die financieel wat willen overhouden aan het eind van het traject Die zoveel mogelijk zelf willen kunnen doen Die soms niet technisch zijn en dan wat ondersteuning nodig hebben Die een product willen leveren zonder gedoe met een flinke garantie Als je zelf websites wilt bouwen voor klanten, op basis van beschikbare functies, zonder technische kennis en deze wil kunnen laten uitbreiden met eventuele maatwerk wensen dan is Sitewise een ideaal platform voor jou. Sitewise zit vol met de meest voorkomende website functies en wordt continu uitgebreid met nieuwe functionaliteit. We vullen deze graag voor je aan met jouw maatwerk wensen. Kom je ergens niet uit dan bieden wij je uitgebreide ondersteuning. Voor designers en marketeers Sitewise is ontwikkeld om het ideale platform te zijn voor designers en marketeers die websites leveren aan klanten. Met Sitewise kun je zelfstandig aan de slag en daarbij gebruik maken van technische ondersteuning wanneer je daar behoefte aan hebt. Ben je niet technisch dat kun je met Sitewise zelf websites bouwen. Heb je technische skills dan heb je de vrijheid om deze te gebruiken binnen de Sitewise Ontwikkelmodule. De voordelen op een rijtje: 1. Bibliotheek met meest voorkomende functies, direct toepasbaar 2. Geschikt voor niet techneuten 3. Uitbreidbaar met maatwerk wensen 4. Ontwerpmodule om de huisstijl van jouw klanten toe te passen 5. Ontwikkelmodule voor ontwikkelaars die zelf willen knutselen 6. Uitgebreide telefonische/e mail ondersteuning 7. Instructie bij ons op kantoor 3

4 YouPrint Websites leveren aan klanten is een complexe activiteit waarbij je goed moet blijven opletten. Verwachtingen managen is van groot belang evenals het vastleggen van afspraken. Wanneer je sites ontwikkeld voor jouw klanten dan zul je vaak dezelfde functies en handelingen repeteren. Je hebt namelijk je eigen stilo. Door deze zaken vast te leggen in jouw eigen blauwdruk (YouPrint) heb je een continu verbeterende blauwdruk die je kan gebruiken als basis voor de website van iedere klant. Wil je jouw eigen YouPrint laten klaarzetten laat het ons weten. YouPrint is alleen beschikbaar voor Gold Partners. 4

5 Zo werkt het / aan de slag We hebben nagedacht over het proces. Hieronder staan de stappen die je doorloopt om de perfecte Sitewise site aan jouw klant op te leveren. Stap 1: Je vraagt bij Mach3Builders een Sitewise website aan. Wij zetten dan voor jou een eigen Sitewise website omgeving klaar waar je één website in kunt inrichten. Iedere website heeft zijn eigen database en beheeromgeving. Stap 2: Nu jouw Sitewise omgeving klaarstaat kun je aan slag met het inrichten van de website. Standaard staan de meest gebruikte website functies klaar. Zo zijn er diverse templates, pagina s, lijsten en andere functies die je enkel nog aan hoeft te zetten. Sitewise zit boordevol functionaliteit die jij enkel hoeft in te stellen. Middels de Sandbox kun je heel flexibel de pagina s zelf indelen. Stap 3: Wanneer je de eerste instellingen hebt gedaan kun je vervolgens aan de slag met de in page designer. De in page designer biedt je de mogelijkheid om de algemene website vormgeving in te stellen. Bepaal eenvoudig de kleuren, lettertypes en marges. Indien je verder wil gaan dan de standaard ontwerp instellingen dan kun je zelf of door ons de stylesheet van de website middels css (laten) aanpassen. Wil je dat wij dit voor je doen dan hoef je enkel het gewenste ontwerp aan te leveren voor de onderdelen die je wil laten aanpassen. Dit kan middels Photoshop of InDesign bestanden, maar ook middels een eenvoudige omschrijving. Stap 4: Wil je specifieke functies laten toevoegen aan jouw website dan kunnen we je daarbij helpen. Op maat programmeren we jouw wensen in jouw Sitewise omgeving. Deze stap zal niet altijd nodig zijn, maar het is fijn om te weten dat je nu en in de toekomst beschikt over deze flexibiliteit. Stap 5: Nu de website klaar is kun je deze aan jouw klant opleveren. We helpen je vervolgens graag met het online zetten van de website. We kunnen je volledig ondersteunen, inclusief het registreren van domeinnamen. 5

6 Sitewise Modules Hieronder volgt een overzicht met alle functionaliteit welke je in Sitewise kunt gebruiken. Functie In page editor Media bibliotheek Gebruikersbeheer Sandbox In page designer Ontwikkelmodule Formuliereditor Zoekmachine optimalisatie Omschrijving Je kan de diverse teksten en beelden op pagina s beheren met de visuele in page editor tool. Zonder enige technische kennis kunnen jij en jouw klant de website beheren. Alle assets zoals afbeeldingen, video s en pdf bestanden worden opgeslagen in de media bibliotheek. Vanuit deze omgeving kun je bestandsnamen aanpassen en afbeeldingen bewerken. Voeg een onbeperkt aantal gebruikers in die de website mogen beheren. Er zijn diverse rollen: viewer, publisher, administrator, super user. 100 procent flexibiliteit om de opbouw van pagina s te bepalen. Met de sandbox kun je zelf blokken op een pagina in de juiste volgorde slepen. Bepaal per pagina eenvoudig wat er wordt getoond. Realtime jouw website designen was nog nooit zo eenvoudig. Stel onder andere kleuren, lettertypes en lijnhoogtes in. Ben je zelf technisch dan biedt Sitewise je volledige controle over html, css en javascript. Vanuit de ontwikkelmodule kun je direct vanuit de beheeromgeving essentiele code aanpassingen eenvoudig en snel doorvoeren. Met de formuliereditor maak je webformulieren in alle soorten en maten. Bepaalde welke velden jij nodig hebt. We bieden je verschillende veldtypes. Alle verzonden formulieren worden opgeslagen in het systeem zodat je naast een e mail ook altijd een backup hebt. In CSV formaat kun je alle response downloaden. Binnen Sitewise kun je alles perfect instellen om de website te optimaliseren voor zoekmachines. Op website niveau en per pagina kunnen SEO instellingen worden gedaan. Sitemap URL Favicon plaatsing Google Analytics trackingscode instellen Google Tagmanager code instellen 6

7 Google Siteverificatie instellingen Robots.txt instructies Meta informatie per pagina URL rewriting Zoekmachine vriendelijke URL s 7

8 De In page editor Teksten plaatsen/aanpassen van een Sitewise website kun je eenvoudig doen vanuit de In page editor. Je komt als volgt in deze omgeving: Instructie: 1. Klik in het startscherm op het kompas 2. Klik vervolgens op het oogje linksbovenaan het scherm Nu kun je direct aan de slag met het aanpassen van de teksten van de diverse pagina s. Navigeer door de website naar de te bewerken pagina en klik op de knopjes die bij de diverse onderdelen op de pagina staan. 8

9 Een pagina aanmaken Er zijn meerdere methodes om een pagina aan te maken in Sitewise. Afhankelijk van de situatie waarin je deze wil aanmaken kun je kiezen uit de methodes: 1. Toevoegen in het menu / in pagina bewerking modus 2. Toevoegen vanuit het pagina s overzicht 3. Toevoegen vanuit de sitemap Instructie: Een pagina toevoegen in het menu 1. Ga naar de In pagina bewerking modus (oogje linksbovenaan) 2. Klik op het knopje dat bij het menu staat waar je een pagina in wil plaatsen 3. Er opent een popin scherm met daarin de structuur van de pagina s in het menu. De pagina s die in het grijs worden getoond zijn niet zichtbaar in het menu. Selecteer deze en klik vervolgens op het oog icoontje om deze zichtbaar te maken. 4. Klik op het plus icoontje om een pagina toe te voegen in het menu Instructie: Een pagina toevoegen vanuit het pagina s overzicht 1. Klik op de pagina s knop in het menu 2. Klik vervolgens op de pagina toevoegen knop 3. Er verschijnt een popin waarin je de paginanaam kunt instellen. Kies vervolgens de template content om de pagina vrij in te kunnen vullen met de Sandbox functie. 9

10 Instructie: Een pagina toevoegen vanuit de sitemap 1. Klik op de sitemap knop in het menu 2. Klik vervolgens in het menu rechts op Toevoegen 3. Er verschijnt een popin waarin je de paginanaam kunt instellen. Kies vervolgens de template content om de pagina vrij in te kunnen vullen met de Sandbox functie. 10

11 Sandbox: flexibel pagina s indelen In Sitewise kun je een onbeperkt aantal pagina s aanmaken. Iedere pagina kun je volledig zelf instellen. Middels de Sandbox tool kun je zelf functieblokken plaatsen en wijzigen qua volgorde. Hieronder volgt de uitleg hoe je dit kunt doen. Instructie: Pagina s indelen Stap 1: Ga naar de website applicatie Klik op de wereldbol in het startscherm Stap 2: Ga naar de in pagina bewerking modus Klik op het oog icoontje linksbovenaan de pagina Stap 3: Navigeer naar de pagina die je wilt aanpassen Gebruik voor het navigeren het menu van de website Stap 4: Klik op de Sandbox knop Je vindt de Sandbox knop tussen de header en footer van de pagina. 11

12 Stap 5: Sleep de gewenste blokken in de Sandbox Er is zojuist een popin geopend met daarin de Sandbox. Links staan de beschikbare blokken die je naar het rechter vlak, de Sandbox, kunt slepen. Sleep de gewenste blokken naar het rechter vlak. De volgorde kun je continu wijzigen. 12

13 In pagina designer Sitewise maakt het ontwerpen van websites eenvoudig. Per blok kunnen twee varianten worden vormgegeven. Middels de in pagina designer kunnen de meest voorkomende ontwerpinstellingen worden gedaan. In pagina designer opstarten 1. Ga naar de in pagina bewerkings modus (klik op het oogje linksbovenaan het scherm) 2. Klik vervolgens op een van de blauwe ontwerp knoppen die bij de diverse blokken worden getoond. Deze knoppen staan in de rechter bovenhoek van het blok. 13

14 In pagina designer preview Bepaal per blok het gewenste design, jouw bewerkingen zijn realtime zichtbaar. Per bloktype kun je twee varianten designen, deze zijn in de gehele website overal qua vormgeving gelijk. 14

15 Beschikbare blokken Sitewise zit vol met heel veel functionaliteit. Je kan deze met een simpele sleepbeweging in jouw website plaatsen. Hieronder volgt een overzicht van de beschikbare functies/blokken. Banner Banner blok met achtergrondafbeelding, tekstoverlay en parallax effect. 15

16 Blog Overzicht met artikelen en per artikel een link naar een achterliggende pagina. Per artikel de mogelijkheid voor bezoekers om te reageren. De beheerder kan reacties verwijderen. Het is ook mogelijk om het kunnen reageren uit te zetten. Border 16

17 Om een scheiding aan te brengen tussen de diverse blokken is het mogelijk het border blok te plaatsen. Er wordt dan een lijn over de gehele breedte van de pagina getoond. 17

18 Brochures Een overzichtelijke weergave van meerdere PDF downloads. Per item wordt automatisch een icoon getoond. Per item kun je zelf een PDF uploaden/selecteren. Wanneer de bezoeker op een item klikt dan wordt direct het bestand gedownload/getoond. 18

19 Cards 1 col Weergave van 1 card welke over de gehele breedte van de pagina wordt getoond. Boven de card kan een tekst worden geplaatst en in de card kan ook tekst of een afbeelding worden getoond. Cards 2 col Weergave van 2 cards welke verdeeld over de gehele breedte van de pagina worden getoond. Boven de cards kan een tekst worden geplaatst en in de cards kan ook tekst of een afbeelding worden getoond. 19

20 Cards 3 col Weergave van 3 cards welke verdeeld over de gehele breedte van de pagina worden getoond. Boven de cards kan een tekst worden geplaatst en in de cards kan ook tekst of een afbeelding worden getoond. Cards 4 col Weergave van 4 cards welke verdeeld over de gehele breedte van de pagina worden getoond. Boven de cards kan een tekst worden geplaatst en in de cards kan ook tekst of een afbeelding worden getoond. 20

21 Content 1 col Weergave van 1 content kolom welke over de gehele breedte van de pagina wordt getoond. Boven de kolom kan een tekst worden geplaatst en in de kolom kan ook tekst of een afbeelding worden getoond. Content 2 col Weergave van 2 content kolommen welke naast elkaar over de gehele breedte van de pagina worden getoond. Boven de kolommen kan een tekst worden geplaatst en in de kolommen kan ook tekst of een afbeelding worden getoond. 21

22 Content 3 col Weergave van 3 content kolommen welke naast elkaar over de gehele breedte van de pagina worden getoond. Boven de kolommen kan een tekst worden geplaatst en in de kolommen kan ook tekst of een afbeelding worden getoond. Content 4 col Weergave van 4 content kolommen welke naast elkaar over de gehele breedte van de pagina worden getoond. Boven de kolommen kan een tekst worden geplaatst en in de kolommen kan ook tekst of een afbeelding worden getoond. 22

23 Dealerlocator Google Maps weergave met locaties van partners/dealers. Naast de kaart staat een overzicht met de diverse plaatsen waar de partners/dealers gesitueerd zijn. Wanneer de bezoeker op een locatie op de kaart klikt schuift automatisch de locatielijst open daar waar de betreffende dealer vermeld staat. 23

24 Events Overzicht met evenementen. Het eerst aankomende evenement wordt bovenaan de lijst getoond. 24

25 FAQ Een overzicht met veel gestelde vragen. Door op een vraag te klikken klapt deze open zodat het antwoord zichtbaar wordt. Ideaal om een flinke lijst veel gestelde vragen beschikbaar te stellen op een website. 25

26 Footer 1 Een footer vormt de afsluiting van een pagina. Op iedere pagina van een website staat altijd dezelfde footer. Binnen Sitewise beschik je over meerdere footers waaruit je kunt kiezen. Uiteraard kun je ook een footer op maat laten maken. Footer 1 heeft vier kolommen waarin links geplaatst kunnen worden. Gecentreerde midden in kan onderaan de footer het logo van het bedrijf getoond worden. Social Media iconen zijn beschikbaar onder het logo. 26

27 Footer 2 Een footer vormt de afsluiting van een pagina. Op iedere pagina van een website staat altijd dezelfde footer. Binnen Sitewise beschik je over meerdere footers waaruit je kunt kiezen. Uiteraard kun je ook een footer op maat laten maken. Footer 2 heeft vier kolommen waarin links geplaatst kunnen worden. Formulier Met het formulierblok kun je zelf bepalen waar op de pagina een formulier verschijnt. Formulieren kun je onbeperkt aanmaken in de formulierbeheer module. Google Maps kaart 27

28 Locatie weergave middels een Google Maps kaart. Stel eenvoudig zelf het gewenste adres en zoom niveau in. 28

29 Header 1 / menu Een transparant menu welke wordt getoond over het hero blok dat eronder staat. Logo, menu items, talenkiezer en zoekfunctie. Header 2 / menu Binnen Sitewise zijn er verschillende soorten menu headers beschikbaar. Header 2 bestaat uit een logo (links), het menu gecentreerd, daarnaast optioneel een talenkiezer en zoekfunctie. Header 3 / menu Binnen Sitewise zijn er verschillende soorten menu headers beschikbaar. Header 3 bestaat uit een logo (gecentreerd bovenaan), het menu gecentreerd, rechts optioneel een talenkiezer en zoekfunctie. Header 4 / menu Header 4 toont twee menu s bovenaan de pagina. Een actiemenu rechtsbovenaan en het hoofdmenu gecentreerd op de pagina. Beide menu s zijn los van elkaar te beheren. Heading 29

30 Een blok met een groot weergegeven titel gecentreerd op de pagina met daaronder een inleidende tekst. De inleidende tekst kan tevens voorzien worden van afbeeldingen. Logoslider Horizontale weergave van logo s naast elkaar. Pijltjes links en rechts om de volgende/vorige serie logo s op het scherm te tonen. In de logoslider selecteer je een fotoalbum waarvan de foto s in de slider getoond dienen te worden. 30

31 Nieuws Overzicht met nieuwsartikelen. Per nieuwsartikel is er een link naar de achterliggende nieuws detailpagina. De meeste recente nieuwsartikelen worden bovenaan de lijst getoond.

32 Nieuwsbrief aanmelden Nieuwsbrief aanmeldformulier. In de formulierbeheer module moet nog wel de juiste koppeling ingesteld worden. Sitewise kan standaard gekoppeld worden aan MailChimp en Campaign Monitor. Uiteraard zijn maatwerk koppeling te realiseren door ons team. Prijzen / pakketten Een overzicht met prijzen/pakketten waar bezoekers uit kunnen kiezen. Deze lijst kun je volledig zelf beheren en uitbreiden. Het aantal features is onbeperkt uit te breiden. Wanneer er meer dan drie pakketten zijn dan wordt er een nieuwe rij onderaan toegevoegd. Producten Een overzicht met producten. Dit betreft een catalogusweergave zonder bestelfunctie. Indien ook besteld moet kunnen worden dan raden wij als product Shopwise aan. Per product wordt een link getoond naar de achterliggende product detailpagina.

33

34 Oplossingen Een overzicht met oplossingen. Per oplossing een link naar de achterliggende oplossing detailpagina. Per rij worden er drie oplossingen getoond.

35 Team Een overzicht met teamleden. Per teamlid de mogelijkheid om een foto te plaatsen en social media iconen. Er is geen link naar een detailpagina per teamlid.

36 Vacatures Een overzicht met beschikbare vacatures. Per vacature is er een detailpagina. Automatisch verschijnen er paginanummers onderaan de lijst. Bij de instellingen van de lijst kan ingesteld worden hoeveel items er op een pagina getoond worden. Instellingen

37 Video Videplayer blok met de mogelijkheid video van externe bronnen (Youtube, Vimeo) te tonen of zelf te uploaden in Sitewise. Instellingen

38 Video overzicht Een overzicht met diverse video s. Per video wordt on click een popin getoond waarin de video direct afgespeeld. Video s kunnen ge embed worden vanuit Youtube, Vimeo of vanuit Sitewise.

39 Formulieren maken In Sitewise kun je onbeperkt formulieren aanmaken en deze voorzien van de gewenste velden. Per formulier kun je de afzender en ontvanger instellen. Het is zelfs mogelijk een kopie van een verzonden formulier naar de verzender te sturen. Zo open je de formulier editor 1. Klik in het menu op Formulieren 2. Klik op formulier toevoegen om een nieuw formulier toe te voegen OF klik op een van de klaar staande formulieren om deze te bewerken Formulier preview Vanuit de formulier preview kun je visueel formulieren samenstellen. Voeg velden toe, sleep deze in de juiste volgorde en bepaal welke velden verplicht zijn. Velden toevoegen Links onderaan de formulier preview staat de knop Veld toevoegen. Klik op deze knop en er verschijnt

40 een popin met de mogelijkheid om het veldtype te kiezen. Praktisch alle bekende veldtypes zijn beschikbaar. Onder andere: tekstvelden, wachtwoord veld, radiobuttons en checkboxen, bestandupload buttons, standaard buttons, selectievelden, datum en tijd kiezers. Veldinstellingen Wanneer een veld aangemaakt is kun je deze selecteren om vervolgens in de rechterkolom de veldinstellingen te bepalen. Onder andere uit diverse validaties kan worden gekozen.

41 Zoekmachine Optimalisatie Met Sitewise kun je jouw website tot in detail optimaliseren voor de zoekmachines. We hebben hiervoor een aantal belangrijke functies ingebouwd. Start: Ga naar instellingen en dan zoekmachine optimalisatie Je kan op de pagina welke nu getoond wordt de belangrijkste zoekmachines optimalisatie onderdelen instellen. Stap 1: Website titel instellen Stap 2: De sitemap url is automatisch aangemaakt en wordt na online gaan doorgegeven via robot.txt 41

42 Stap 3: Stel een favicon in Dit icoontje wordt in de browser in de tabbladen getoond voor betere herkenbaarheid voor de bezoeker/gebruiker. Stap 4: Maak een Google Analytics account aan en vul de aangeleverde code in het veld hieronder in. Mocht je hier niet uitkomen dan helpen we je uiteraard graag. Stap 5: We bieden je ook de mogelijkheid gebruik te maken van de Google Tag Manager. Vul deze code in onderstaand veld in. 42

43 Stap 6: Met Google Webmaster Tools kun je jouw zichtbaarheid nog beter managen. De bijhorende codes kun je hieronder invullen. Zo kun je aan Google bevestigen dat jij de eigenaar bent van de site. Stap 7: De robots.txt kun je in Sitewise eenvoudig zelf beheren. Geef gedetailleerde instructies door aan de zoekmachines zodat ze het juiste voor je indexeren. 43

44 Meta informatie per pagina beheren De meta informatie kun je per pagina beheren. Volg onderstaande instructies per pagina op. Start: Ga naar pagina s en klik dan de gewenste pagina aan Stap 1: Klik op tabblad SEO Vul de onderstaande velden in per pagina / per taal. 44

45 Support Vragen? Hulp nodig? Bel: Mailen kan ook: Samen sta je nooit alleen 45