1

GEBRUIKERSHANDLEIDING SITEBUILDER 7.22

Inhoudsopgave

Quickstart Pagina2Opbouwvanjewebsite Pagina3Afbeeldingen Pagina4Paginas Pagina5Bestanden Pagina6Modules Pagina7

Fotogallery Pagina8Weblog Pagina8Webshop Pagina9Links-Module Pagina10Gastenboek Pagina10Mailinglist Pagina10Contactpagina Pagina11

Account Pagina11Instellingen Pagina11Header/Logo Pagina13Helpdesk Pagina14WerkenmetdeWYSIWYGeditor Pagina15Slidersmakenenplaatsen Pagina23

©NovositeBVNietsuitdezeuitgavemagzondervoorafgaandeschriftelijketoestemmingvandeuitgeverwordenopenbaargemaaktofverveelvoudigd,waaronderbegrepenhetreproducerendoormiddelvandruk,offset,fotokopieofmicrofilmofinenigedigitale,elektronische,optischeofanderevormof(enditgeldtzonodiginaanvullingophetauteursrecht)hetreproduceren(i)tenbehoevevaneenonderneming,organisatieofinstellingof(ii)vooreigenoefening,studieofgebruikwelk(e)nietstriktprivévanaardisof(iii)voorhetovernemeninenigdag-,nieuws-ofweekbladoftijdschrift(alofnietindigitalevormofonline)ofineenRTV-uitzending.

2

Quickstart

WebeginnenmetdeQuickstart.Vaakisdezealvoldoendeomtewetenhoejemoetbeginnenmethetmakenvanjesite.Derestvandehandleidingbehandeltalleonderdeleninmeerdetail.1.Startjebrowser,wijadviserenFirefox,SafariofChrome.InternetExplorerkanookmaarisnietideaal.2.Open2tabbladeninjebrowser.Inheteerstetabbladopenjejewebsite(www.mijnwebsite.nl)eninhettweedetabbladopenjedesitebuildervandezewebsite(www.mijnwebsite.nl/beheer)enlogjeinopdesitebuilder.Ditwerktechthethandigst.Inhet2etabbladpasjejewebsiteaan,eninheteerstetabblad,opjewebsite,kunjedeveranderingenmeteenzien.Letop:alsjeietshebtaangepastmoetjedewebsiteofdepaginanatuurlijkwelevenherladenomdewijzigingentezien.3.GanaarInstellingenHierkiesjealvasteenmooilettertypevoorjehelesite.Jekankiezenuitmaarliefst258lettertypes!Hetlettertypewatjehierkiestwordtgebruiktvoorjehelewebsiteenallemodules.Verderkiesjeeenlettertypevoorhethoofdmenuensteljealvastwatkleureninvoordeverschillendeonderdelenvanjewebsite.4.PaginasaanmakeneninvullenKlikopPaginasinhethoofdmenuenmaakpaginasaan.(Home,Overons,Diensten,Portfolio,etc)Depaginasdiejeaanmaaktzijnmeteenalslinkinhethoofdmenuvanjewebsitezichtbaar.Inhetoverzichtziejedepaginasdiejeaangemaakthebt.KlikopAanpassenomdepaginaintevullenmetdepagina-editor.NaastpaginaskunjeSubpaginasaanmaken,diekomeninhethoofdmenuondereenhoofdpaginatestaan.DaarnaastzijnernogOnderliggendepaginas.Dezeverschijnennietinjehoofdmenu.Jekanvanuitpaginasofsubpaginaseeninternelinkmakennaaronderliggendepaginas.Opdezemanierkunjedusontelbarepaginasvoorjewebsitemaken.5.HandigeModulesNaastdenormalepaginasbeschikjeookoverhandigeModulesteweten:Webshop,Gallery,Downloads,Gastenboek,Mailinglist,Blog,Contactpaginametcontactformulier,RoutebeschrijvingmetGoogleMaps,Linksmetscreenshots.Dezekunjeallemaalmetéénklikaan-enuitzetten.GanaarModulesinhethoofdmenu.Hierkunjekiezenwelkemodulesjewilinschakelenvoorjewebsite.Tevenskunjehierallemodulesbeheren.Beheervandemodulesspreektgrotendeelsvoorzich.Voormeerdetails:ziederestvandezehandleiding.5.DeMobielewebsiteactiverenSteedsmeermensenzullenjouwwebsitemethunsmartphonebezoeken.Enalsjezelfweleenssurftmetjesmartphonedanhebjevastwelgemerktdatlangnietallesiteshandigenoverzichtelijkwerkenopzo'nkleinschermpje.Daaromsturenwemobielebezoekersdoornaardegeoptimaliseerdemobielesite.Maakmobielepaginasaan.GaonderPaginasnaarMobielePaginas.Hierkunjepaginasvoorjemobielesiteaanmakeneninvullen.Bepaaleerstwelkeinformatiejeeenmobielebezoekerwilvoorschotelen.Minderisbeter!Nietteveelpaginasmakenennietteveeltekst!Uiteraardkunjetekstenuitjeregulieresitekopierenenplakkeninjemobielepaginas.AlsjehiermeeklaarbentgajenaarInstellingen.Bovenstaat:Smartphonegebruikersdoorsturennaarmobielesite?DezezetjeopJa.Klaar.Bezoekjesitenumaareensmetjesmartphoneenvoila:Jemobielewebsite!6.Header/BovenbalkvoorjewebsiteOk,ditismisschienhetenigeonderdeelwatjemisschienbeternietzelfkuntdoen…HelemaalboveninjesitewiljenatuurlijkeenmooieHeader.Ditiseenafbeeldingboveninjewebsite.Hierinstaatnatuurlijkjelogo(alsjeeenlogohebt),misschieneensloganeneventueelenkeleillustraties.Endanliefstineenpakkendecollage.Kanjedatwelzelf?Omeerlijktezijn:Langnietiedereen.Nietiedereenisgrafischvormgevernatuurlijk.JemoetechthandigzijnmetPhotoshopofeenvergelijkbaarpakketomhierietsmooisvantemaken.Alsjeerzelfnietuitkomt,dankunjeditwellichtuitbestedenbijeenhandigeneef,buurman,vriendofvriendin.EnalsjedieniethebtdankunjeeenprofessioneleHeaderbestellenbijons.Kost40euro,maardanhebjeookwat.Onzeheaderswordengeleverdmet100%niet-blij-geld-teruggarantieJammergenoegzienwenogsteedsteveelsitesmetniet-mooie,zelfgeknutseldeheaders.Datisechtzonde.Dusalshetjenietluktomietsmooistemaken,laatditdanevenaandepro'sover.Jewebsitewordterzoveelmooiervan!Enderestkunjeechtzelf!

3

Opbouw van je website

Begrippen:1.Domeinnaam:DitishetadreswaarmeejevindbaarbentopInternet.Voorbeeld:www.novosite.nlofwww.nu.nl2.Header:Ditisdebovenbalkmetdeafbeelding.Hierinstaatnormaalgesprokenjelogoen/ofafbeeldingenenevt.slogan.3.Hoofdmenu:Ditzijndeknoppenvanjewebsite.Elketitelisklikbaarenopentdebijbehorendepaginaofmodule.4.Submenu:Jekuntnietalleenpagina'saanmaken,maarooksubpagina's.Dieverschijneninhetmenuonderhoofdpagina;’s.5.Onderhethoofdmenukomthetcontentgedeelte:deinhoudvandegekozenpaginaofdemodule.6.Footer:Ditiseenbalkjemetinformatiedieonderaanelkepaginaverschijnt.Jekanhierbijvoorbeeldjecontactgegevensinkwijt.Aldezeonderdelenkomenuitgebreidaanbodindezehandleiding.Jewebsitebestaatuitzelfgemaaktepagina’s,bijvoorbeed:Home,Overons,Producten,DienstenDezepagina’skunjezelfaanmakeneninvullenmettekst,afbeeldingenenvideo.Naastdezegewonepagina’skanjeopjesiteookmodulesin-ofuitschakelenteweten:Webshop,Fotoalbum,Blog,Gastenboek,Links,Downloads,Mailinglist,Contactformulier,Kaart/Rout

4

Afbeeldingen Geenmooiewebsitezondermooiefotos/afbeeldingen!Voordatjebegintmethetinvullenvanjepaginasishethandigomalvastwatillustratiemateriaalteverzamelen.Ditkunnenfotoszijn,logo’s,clip-art,tekeningen,symbolen,etc.

AfbeeldingenuploadenUploadenbetekent:hetversturenvaneenbestandvanjeeigencomputernaaronzewebserver.Ditisnodigomeenafbeeldingoffotoonlinetekrijgeneninjepaginatekunneninvoegen.KlikopdeknopAfbeeldingeninhethoofdmenuBijAfbeeldinguploadenklikjeopKiesBestand/Bladeren(browse)omdegewensteafbeeldingopjeeigenPCteselecteren.JezoektdegewensteafbeeldingdanopinhetdesbetreffendemapjeopjePCofMAC.Daarnakiesjeinwelkegroepjedefotowilplaatsen.Hetishandigomgroepenaantemakenomhetvoorjezelfoverzichtelijktehouden.Vervolgens:AfbeeldingverkleinentotbreedteDefotosvanjedigitalecamerazijnveeltegrootomineenwebpaginateplaatsen.Wegaandezedusbijhetuploadendirectverkleinen.Hiergeefjedebreedteopdiedeafbeeldingmoetkrijgen.Dehoogtevandeafbeeldingwordtdanmeteenevenredigaangepast.Maximalebreedteis943pixels,deafbeeldingisdanzobreedalsjepagina.Dus500isietsmeerdaneenhalvepagina.Afhankelijkvanhoejedepaginagaatopmakenbeslistjedushierhoegrootdefotomoetworden.KliknuopAfbeeldinguploaden.Deafbeeldingverschijntinhetoverzicht.Dezestaatnuopdeserverenkaninjesitegeplaatstworden.Jekandeafbeeldingzonodigooknogdraaienofbijsnijden.ToelichtingbijhetuploadenvanfotosBijhetuploadenvanafbeeldingenkunjeeenmaximalebreedteopgeven.Jeafbeeldingwordtdandirectopmaatgemaakt.Jebestandenmogenmagmaximaal10MBgrootzijn.Zijnjefoto'sgroterdan10mb,danmoetjezeeerstopjeeigenPCverkleinen.Fotosdiejehieruploadkunjeiniederegewenstedepaginainvoegen.Indepaginaeditorklikjedanopditicoontje: .Jezietdaardandefotosstaandiejevervolgenskanselectereninvoegen.

5

Pagina’s Hierkunjeallepaginasvanjewebsiteaanmaken,invullenofverwijderen.NieuwepaginamakenVoereentitelinvoorjeeerstepaginaenklikopNieuwepaginamaken.Denieuwepaginaverschijntinhetoverzicht.InhetoverzichtvandepaginasklikjeopAanpassenomdezenieuwepaginaintevullenofaantepassen.Elkepaginadiejeaanmaaktgeefjeduseentitel.Dezetitelisdanookmeteendenaamvoordeknopinhethoofdmenu.Bijvoorbeeld:Home|OverOns|Onzeproducten|Service|Contact|etc..Erzijn3soortenpagina's:Hoofdpagina's,Subpagina'senOnderliggendepagina's.Elkehoofdpaginadiejeaanmaaktverschijntautomatischalsknopinhethoofdmenuvanjewebsite.Elkesubpaginadiejeaanmaaktverschijntautomatischalsknopinhetsubmenuonderdebijbehorendehoofdpagina.Onderliggendepagina'skomennietinhethoofdmenu.Jekanvanuitdeanderepagina'slinkennaardezeonderliggendepagina's.Metdezestructuurkunjedusoneindigveelpagina’svoorjewebsiteaanmaken.BelangrijkMaaknietteveelhoofdpagina'saan.Ditisonoverzichtelijkvoorjebezoekersenjewilookdathethoofdmenuop1regelpast.Alsjeeengrotesitegaatmakenmetveelpagina'smoetjeduswerkenmetsubpagina'senonderliggendepagina's.Voorbeeld:Jehebteencoaching-bureauenjebiedt12verschillendetrainingenaan.Jemaakteenhoofdpaginaaan:TRAININGENEndaaronderkomende12subpagina's,1voorelketraining.Wiljenogdieperopeenonderwerpingaandankunjedaaronderliggendepagina'svoorgebruiken.Denieuwepaginasdiejehebtaangemaaktzijnleeg.JekuntdezenuinvullenmetdeWYSIWYGeditor.(WhatYouSeeisWhatYouGet)GanaarpaginasenklikopAanpassenomdepaginateopenenindeWYSIWYGeditor.Indezeeditorkunjenutekst,afbeeldingenofvideoplaatsenenjepaginaopmaken.DitlijkteenbeetjeopeentekstverwerkerzoalsWord.DezeeditorbesprekenweinhethoofdstukWYSIWYGEditor.Bijpagina’skunjeookdepaginasvoorjemobielewebsiteaanmakeneninvullen.MeerdaaroverinhethoofdstukMobielewebsite.

6

Bestanden Injewebsitekunjenaastafbeeldingenooknogverschillendeanderebestandeninvoegen.BijvoorbeeldPDFbestanden.Jekuntdezebestandeninvoegenineenvanjewebpaginas,zodatbezoekersdezekunnendownloaden,ofjekuntzeautomatischlatenverschijneninde"downloads"module.Alsjeditlaatstewil,danmoetjeonderModulesdeDownloadsmoduleaanzetten.

Voereentitelinvoorjebestand.(Ofmaakeersteennieuwegroepaanindiennodig)Kiesdegroepwaarinjehetbestandgaatplaatsen.KlikopBladKiesbestand/Bladerenomhetbestandopjepcteselecteren(maximaal25MB)GeefaanofjehetbestandwiltonenindeDownloadsmodule.Geefeenkortebeschrijvingvanhetbestand.KlikopBestanduploaden.Nahetuploadenverschijnthetbestandinhetoverzicht.NadatjedebestandenhebtgeuploadkunjedezeinjepaginasinvoegenmeteenInternelink.GanaarPaginasenklikopAanpassenbijdepaginawaarjehetbestandinwilplaatsen.

Klikindepaginaopdeplekwaarjedelinknaarhetbestandwilplaatsen.KlikopheticoontjevoorInterneLinks Selecteerdaarhetbestandwaarjenaarwillinken.Delinkwordtgeplaatstindepagina.Jekannuevt.detekstvandezelinkwijzigen.Kijkdaarbijweluitdatjedelinknietverwijderd.Ditdoejedoorinhetmiddenvanhetwoordteklikken,dantypjedaarhetnieuwewoord.Daarnahaaljelinksenrechtshetoudewoordweg.Hetzelfdekunjeookdoenmeteenafbeelding,klikmiddenindelink,voegdaneenafbeeldinginenhaaldaarnalinksenrechtsdetekstweg.Jehebtnueenklikbareafbeeldinggemaakt.Eenbezoekerdienuopjesiteopdehyperlinkkliktkanhetbestanddownloaden.

7

Modules Naastregulierepaginasdiejezelfkuntmakeneninvullenkunjeooknoghandigemodulesaan-enuitzettenvoorjewebsite.DezemoduleskunjehierAan-ofuitzetten.Eenmodulediejehebtaangezetverschijntalslinkinhethoofdmenuvanjewebsite.Detitelvandielinkkunjeopdezepaginaookaanpassen.

8

Fotogallery

1.Maakeen(nieuw)albumaan2.SelecteerdegewensteafbeeldingenupjePCenklikopUpload.Klaar.Deafbeeldingenstaannuinjefotogallery.Bijhetuploadenkunjekiezenuit:UploadenmetpreviewMax.25foto’stegelijk.Jekrijgteenpreviewvanelkefototezienvoordatjekangaanuploaden.UploadenzonderpreviewDitgaatstukkensneller.Maximaal100foto’stegelijk!Hetalbumendefotosverschijnenopjewebsitemetautomatischethumbnails(kleineafbeeldingen).Dezezijnklikbaareniederalbumisvoorzienvaneenhandigeslideshow.Deafbeeldingenwordenverkleindnaareenbreedtevanmaximaal2560pixelsofeenhoogtevan1550pixels.Jekanalleafbeeldingenwijzigenofverwijderen,devolgordeaanpassen,albumsbeheren

Weblog / Nieuwsmodule DezemodulekunjegebruikenomeenBlogteschrijvenofalsnieuws-paginavoorjewebsite.Hetaanmakeneninvullenvanberichtenwerkthetzelfdealshetaanmakeneninvullenvangewonepaginas.Berichtendiejehierplaatstkomenautomatischinjeweblogterechtenwordenoverzichtelijkgetoondopinvoerdatum.Tevensisdemodulevoorzienvaneenhandigezoekfunctiezodatbezoekersjeblog-archiefkunnendoorzoeken.

9

Webshop Alleartikelenwordengeplaatstingroepen.Begindusmethetaanmakenvandezegroepen.Daarnagajeverdermet:ArtikelentoevoegenKieseenartikelnaam.Vuleenartikelnummerin(Alleeninvullenwanneerjeeigenartikelnummerswilgebruiken)KiesdegroepwaarinditartikelgeplaatstmoetwordenVoereenbeschrijvingvanhetartikelin.Hierbijkunjeookafbeeldingenofvideoplaatsen)Voerdeprijsin,inclusiefBTWVoerhetgewichtingramin.(alleennodigalsjeverzendkostenberekendopbasisvangewicht)GeefaanofditartikelmetbrievenbuspakjeofpakketpostverzondenkanwordenLevertijdinvoeren.FotokiezenArtikeltoevoegenBijartikelenwijzigenkunjedeartikelenterugvindenenaanpassen.Hierkunjeperartikelnog4fotosuploaden.Zorgerechtvoordatdezefotosdezelfdeverhoudingenafmetinghebben,datzieterveelbeteruit.Verderkunjedeartikelenhiervoorzienvankeuzeopties(bijvoorbeeld:kleur,maat)Volgordeaanpassenengroepenbeherenspreektallemaalvoorzich.Verzendkosten

10

Opdezepaginakunjejebank-gegevensaanpassenenaangevenofbestellingenalleenverstuurdwordenofookkunnenwordenafgehaald.Jekunthieraangevenofdeverzendkostenwordenberekendopbasisvanhettotaalbedragvandebestellingofofbasisvanhettotaalgewichtvandebestelling.Daaronderkunjevoorbeideoptiesdebijbehorendeverzendkosteninstellenindetabellen.Voorverzendingnaarhetbuitenlandkunjezelfperlandeentoeslaginstellen.MollieInternetKassaMollieiseengerenommeerdeenbekendenederlandsePaymentProvider.Wijwerkenalmeerdan10jaarmetMollie.Standaardkunnenbezoekersvanjewebsitealleenafrekenenmeteenbankoverschrijving.MooierisnatuurlijkalszemetiDEALofPayPalkunnenafrekenen.Jeweetdanmeteendatdebetalingbinnenisenjekuntdirectverzenden.Neemcontactmetonsopomdezekassaopjesitetelateninstalleren.JekanbijMolliealvasteengratisaccountaanmaken:klikhier>InstellingenBijshopinstellingenkunjeverschillendeinstellingenvoorjeshopopgeven.TevenskunjehierdebeschrijvingvanjewebshopendeAlgemeneVoorwaardenvanjewebshopkwijt.BestellingenIederebestellingkrijgjepere-mailbinnen.Jeklantkrijgtookeenbevestigingpere-mail.Daarnaastwordenallebestellingenookopgeslageninjeaccount;dezekrijgjeinditoverzichttezien.

Links Dezemoduletoontallelinksnaaranderewebsitemeteenscreenshotvandebetreffendesite.Ditiseenstukaantrekkelijkerdaneendroogrijtjehyperlinks.VoegeenvooreendesitestoediejewiltoevoegenaanjeLinkspagina.Persitekunjeeentitelopgeveneneventueeleencommentaarofbijschriftinvullen.Iederesiteverschijntnahettoevoegeninhetoverzicht.Devolgordehiervankunjegemakkelijkaanpassendoorteslepen.Ietsnaaronderindepaginavindjeeenmogelijkheidomeenvernieuwingvooreenscreenshotaantevragen.Somsiseenscreenshotnamelijknietmeeractueelomdateensitegewijzigdis.

Gastenboek Hierstaanalleberichtendiezijngeplaatstinjegastenboek.Ongewensteberichtenkunjehierverwijderen.

MailinglistHierstaanalleemailadressendieviajesitezijningeschreven.Alsiemandzijnemailadreswilverwijderendanontvangjevandiegeneeenemailmetonderwerp:unsubscribe.Opdezepaginakunjedatadresopzoekenenverwijderen.HoeverstuurjeeenMailingnaarjeklanten?MetMailchimp:www.mailchimp.comDitisechtdebestemailinglist-managerdiejeopInternetkuntvinden.Wijgebruikenhemook.Indemeestegevallenisdezezelfsgratis!AdressendiejeverzamelthebtviadeMailinglistmodulekunjeimportereninmailchimp.

11

Contactpagina Eenvandebelangrijkstepagina’svanjesiteiseenModule.Ditomdatwedecontactpaginakunnenvoorzienvaneencontactformuliereneenroutekaart.Jekanhierdegegevensvanjecontactpaginaaanpassen.Tevenskunjehieraangevenofjehetcontactformulieropdepaginawiltonenofniet.Ookkunjehieralleberichtenterugvindendieviahetcontactformulieropjesitezijnverstuurd.AlsjeeenkaartvanGoogleMapsopjecontactpaginawilplaatsenmeteenrouteberekening,dankunjeditaanzettenonderModules,inderechterkolom:Kaartopcontactpagina:Aan.

AccountJevindthier:NieuwsvanNovosite.Belangrijknieuwsverschijntautomatischopdezepagina.WanneerereenupdatebeschikbaarisvoordeSitebuilderkunjedezevoortaanzelfinstallerenmet1klik!OnderAccountkunjeverderjeklantgegevensaanpassen.Letervooralopdatjee-mailadreswathierstaatklopt.Wijsturenbelangrijkeberichtenaltijdnaarditadres.Iederjaar,eenmaandvoordatjepakketofdomeinverlooptmailenwejeeenherinneringmetdaarineenlinkwaarmeejehetpakketofhetdomeinkuntverlengen.Onderfacturenkunjeallefacturendownloaden.Statistiekenbevateenlinknaardestatistiekenvanjewebsite.Algemenevoorwaarden:dekleinelettertjes

InstellingenHiersteljecentraaleenaantalzakenindiedeopmaakenuitstralingvanjewebsitebepalen.Demeesteinstellingensprekenvoorzich,hieronderbesprekenwedeinstellingenwaarenigeuitlegbijnodigis.

Websiteonline?AlsjedezeopNeezetisjewebsiteisnietmeerzichtbaarvoorbezoekers.Welkunjezelfnogsteedsdehelesiteaanpassenmetdesitebuilder.Smartphonegebruikersdoorsturennaarmobielesite?AlsjeklaarbentmethetaanmakeneninvullenvanjemobielepaginasdankunjedezeopJazetten.Vanafdatmomentwordenallesmartphone-bezoekersdoorgestuurdnaardespecialemobielesite.

12

Achtergrondkleurvoorallepaginasenmodules.Bijtwijfel:Kieswit!Eriseenredendatdemeesteprofessionelewebsiteswittepaginashebben.KleurvandemargesJewebsiteheefteenvastebreedte,uitgaandevandebezoekersmethetkleinstebeeldscherm.Bezoekersmeteengroteremonitorzienlinksenrechtsvandesitelegemarge.Dezemargekunjeeenkleurgeven.(ofeenafbeelding,zieverderop)Lettertypevoorallepagina’senmodulesJehebthierkeuzeuitalleGooglefontsenderegulierelettertypes.Zestaanopalfabet.Hetlettertypewatjehierkiestwordtvoorjehelewebsitegebruikt,behalvealsjemetdepaginaeditorzelfeenanderlettertypekiestvoordepagina.Hetbesteisom1lettertypetegebruikenvoorjehelesite.Lettertypemobielewebsite:idemHyperlinkkleurHetisgoedomeenhyperlinkeenanderekleurtegeven.Dezevaltdanmeeropenhetisvoordebezoekerduidelijkdatdezeklikbaaris.DeRolloverkleurvandehyperlinkwordtgetoondalseenbezoekermetzijnmuisopdehyperlinkgaatstaan.

FooterinstellingenHierkunjeinstellenofjewebsiteeenFooterheeftofniet.Defooterisdeafsluitervaniederepagina.Zieookdeafbeeldingindeinleiding.Hierkunjebijvoorbeelddecontactgegevensplaatsenzodatdezealtijdinbeeldzijn.Demobielewebsiteheefteenapartefooter,omdathierveelminderruimtebeschikbaaris.Indefootervandemobielesitekunjejee-mailadresen/oftelefoonnummerplaatsen.Beidezijndanopeensmartphoneklikbaarzodatbezoekerssnelenmakkelijkcontactmetjekunnenopnemen.OpdepaginaInstellingenkunjeverderachtergrond-afbeeldingeninstellenvoordepaginas,marges,hoofdmenuenfootervandewebsite.

13

GoogleAnalyticsGoogleAnalyticsgeeftzeeruitgebeidestatistiekenenveelinzichtinhetverkeeropjewebsiteenhetgedragvanjebezoekers.WeadviserenjeomeengratisGoogleAnalyticsaccountaantemakenop:http://www.google.com/analytics/BijhetaanmakenvandeaccountkrijgjevanGoogleeentracking-codediejeinjewebsitemoetplaatsenomdestatistiekenteinstalleren.Dezecodeplaatsjeinhetvakwatjehierbovenindeafbeeldingziet.(onderaandepaginaInstellingen.)

Header - LogoHelemaalboveninjesitewiljenatuurlijkeenmooieHeader.DitiseenafbeeldingboveninjewebsiteHierinstaatnatuurlijkjelogo(alsjeeenlogohebt),misschieneensloganeneventueelenkeleillustraties.Endanliefstineenpakkendecollage.Hierondereeneenvoudigvoorbeeld.

Zelfmakenofuitbesteden?Kanjezo’nmooieheaderwelzelfmaken?Alswenaardepraktijkkijkenmoetenwehelaasconcluderen:vaakniet!JemoetechthandigzijnmetPhotoshopofeenvergelijkbaarpakketomhierietsmooisvantemaken.Nietiedereenisgrafischvormgevernatuurlijk.Dezeafbeeldingiswelvancruciaalbelangvoordeuitstralingvanjewebsite.Alsjeerzelfnietuitkomt,dankunjeditwellichtuitbestedenbijeenhandigeneef,buurman,vriendofvriendin.EnalsjedieniethebtdankunjeeenprofessioneleHeaderbestellenbijons.Datkost40euro,maardanhebjeookwat.Kijkmaarnaarvoorbeeldenophttp://novosite.nl/voorbeelden.phpOnzeheaderswordengeleverdmet100%niet-blij-geld-teruggarantieJammergenoegzienwenogsteedsteveelsitesmetniet-mooie,zelfgeknutseldeheaders.Datisechtzonde.Dusalshetjenietluktomietsmooistemaken,laatditdanevenaandepro'sover.Jewebsitewordterzoveelmooiervan!Enderestkunjeechtzelf!Alsjehetzelfkuntofjehebteenbuurmanofkennisdiehierhandigmeeis:nogbeter!Deafmetingenvoordeheadermoetzijn:Breedte:exact978pixels.Hoogte:maximaal250pixels.Bestandsformaat:JPGofGIF.Eengangbareheaderisdus978x200of978x250pixels.DeheaderdiejeinsteltbijHeader/Logowordtvoorallepaginasenmodulesgebruikt.Daarnaastkunjevoorelkepaginaenvoorelkemoduleeenaparteheaderuploadenalsjedatwil.Ookkuneenslider/slideshowinjeheaderplaatsen.(ziehoofdstukSliders)

14

Helpdesk Dezesitebuilderiseenechtdoe-het-zelfpakket.Datwilechternietzeggendatjeeralleenvoorstaatalsjeergensnietuitkomt.-DeHandleidingkunjeopdezepaginadownloaden-Instructiefilmpjes–isereenonderwerpwaarjegraageenklik-voor-klikinstructiefilmpjevoorzouzien?Geefhetonsdoor!-Meestgesteldevragenenantwoorden.-CustomerSupport:Hierkunjeeensupport-ticketaanmaken.Jekrijgtopwerkdagenaltijdbinnen24uurantwoordmaaronzeklantenweten:meestalveelsneller!Alleticketswordenbewaardzodatjedezeookaltijdkuntteruglezen.-Spoedeisendestoring;Inhetweekendisonskantoorgeslotenmaaruiteraardstaanwealtijdstandby.Alleeninzeerdringendegevallen(bijvoorbeeld:websitenietbereikbaar)stuurjeeene-mailnaarspoed@novosite.nlErgaatdaneenSMSnaaronzebereikbaarheidsdienstenwijnemendandirectactie,7dagenperweek.Beschrijfinjeberichtduidelijkhetprobleemenvermeldaltijdomwelkedomeinnaamhetgaat.Vermeldtevensopwelktelefoonnummerjebereikbaarbent.Voorminderspoedeisendezakenmaakjeeengewonesupportticketaan.

15

Werken met de WYSIWYG editor (What You See is What You Get) GanaarPaginasenklikopAanpassenachterdepaginadiejewilaanpassen.Depaginawordtnugeopendindeeditor.Ziedeafbeeldinghieronder.

IederepaginapasjeaanmetdezeWYSIWYGeditor.Ditiseensoortonlinetekstverwerker.Hiermeekunjetekstenplaatsenenopmaken,afbeeldingenofvideoinvoegen,hyperlinksnaaranderepaginasofnaardownloadbarebestandenmakenennogmeer…Opdewebsitenovositedemo.nlkunjeonderdepaginaHandleidingeenaantalvideosbekijkendieallefunctiesduidelijkuitleggenmetvoorbeelden.Jezietdanprecieshoehetwerkt.Opdevolgendepaginasbesprekenweallefunctiesvandeeditor.SUPER-MEGA-BELANGRIJK!!!PlaknooitzomaartekstenvanuitWordofeenanderewebsiteindeeditor!DoejeditweldanvervuiljedecodevanjepaginametallerleiHTMLdieernietinthuishoort.Dekansopstoringeninjepaginasofdeeditorisdanheelgroot.Ookwordtjewebsiteerlangzamervan.Natuurlijkmagjetekstenplakken,maarjemoethiervooraltijddeknopTekstplakkengebruiken.Erwordtdanschonetekstzonderopmaakgeplakt

16

Lettertype(bovensteknop)enLettertypeuitgebreid(ondersteknop)Letop:GebruikdezefunctieNIETomhetlettertypevoorjepaginastekiezen.DitdoejeonderInstellingen.Datlettertypegeldtdannamelijkvoordehelesite.Datishandigwantaljepaginasenmoduleshebbendanhetzelfdelettertype.AlsjeditaanpastonderInstellingendanpasjehetdusin1xaanvoorjehelesite.Metdebovensteknopkunjeeenstuktekstofeentiteleenafwijkendlettertypegeven.Selecteereenstuktekstindepaginaenklikvervolgensopdezeknop.Jekannuvoordezeteksteenaangepastlettertypeselecteren.JehebtdekeuzeuitGoogleFontsofBasicFonts.Deondersteknopkanhetzelfdemaarheeftnogeenaantaluitgebruideopmaakfunctieszoalsafmeting,schaduw,regelafstandtussenruimte,etc.

LettergrootteOpnieuw:GebruikdezefunctieNIETomdelettergroottevoorjepaginastekiezen.DitdoejeonderInstellingen.Jewilnamelijkdatdezegelijkisvoorallepaginasenmodules.AlsjeditaanpastonderInstellingendanpasjehetdusin1xaanvoorjehelesite.Dezefunctiegebruikjeomeenstuktekstofeentitelinjepaginaeenafwijkendegroottetegeven.Selecteereenstuktekstenklikopdezeknop.Jekankiezenuit7formaten.

LetterkleurWederom:GebruikdezefunctieNIETomdeletterkleurvoorjepaginastekiezen.DitdoejecentraalbijInstellingen.Jewilnamelijkdezelfdekleurvoorjehelesite.Dezefunctiegebruikjeomeenstuktekstofeentitelinjepaginaeenafwijkendekleurtegeven.Selecteereenstuktekstenklikopdezeknopenkieseenkleur.

17

TeksthighlightenMetdezeknopkunjeteksteenachtergrondkleurgeven.Netzoalsmeteenmarkerstift.Gebruikookdezefunctiespaarzaam.Teveelzieterrommeliguit.

SpecialetekensMetdezeknopvoegjespecialetekensinzoals$€ofaccentenęęâéenz.

HorizontalescheidingslijnMetdezeknopkunjeeenhorizontalelijninjepaginainvoegen.

OpmaakverwijderenMetdezeknopkunjealleopmaakvaneenstuktekstongedaanmaken.Zoalsdikgedrukt,ofdekleurofgroottevaneenstuktekst.

Metdezeknoppenkunjedeuitlijingvandetekstaanpassen.Keuzeuitrespectievelijk:linksuitlijnen,middenuitlijnen,rechtsuitlijnenofoverdeheleregeluitvullen.Werkwijze:eerstdetekstselecteren,daarnauitlijningaanklikken.

18

AfbeeldinginvoegenKlikeerstindepaginaopdeplekwaarjedeafbeeldingwilplaatsen.Klikdaarnaopditicoontje JezietnualleafbeeldingendiejealhebtgeuploadonderAfbeeldingen.Ookkunjehiereennieuweafbeeldingtoevoegenzodatjehiervoordepaginaniethoeftteverlaten.SelecteerdeafbeeldingdiejewilinvoegenenklikopInvoegen.Deafbeeldingisnugeplaatstindepaginaopdegekozenplek.

AfbeeldingaanpassenKlikopdeafbeeldingdiejewilaanpassenendaarnaopdezeknop.Jekankiezenuiteenaantaleffectenzoalsschaduwofverschillendeframes.Ookkunjehierdeuitlijningofmargesrondomdeafbeeldingaanapssen.Tenslottekunjedeafbeeldingookeenlinkgeven.(URL)

TabelinvoegenKlikopdezeknopenkieshetaantalrijenenkolommendatjetabelmoetkrijgen.Detabelwordtmeteenindepaginageplaatst.

TabelaanpassenMetdezefunctiekunjedezojuistingevoegdetabelaanpassen.Klikeerstindetabelofindecelvandetabeldiejewilaanpassen.Klikdaarnaopdezeknop.AandelinkerkantziejeboveninInsertenModify.MetInsertkunjeindecelwaarinjestaatookweereenonderverdelingmaken.Jekrijgtdanduseentabelineentabel.MetdeknopModifykunjerijenofkolommentoevoegenofverwijderen,ofcellensamenvoegen(Mergecell)

19

Aanderechterkantvanhetvensterkunjedetabelverderopmakenmetkleuren,kaders,celafmetingenaanpassen,tekstuitlijningaanpassen.Rechtsonderinkunjedemaatvandetabelaanpassen(volledigebreedtevandepaginaofeenvasteafmetinginpixels.

KantenklaretabellenBeetjelastigomzelftabellentemaken?Geenprobleemjekanhierkiezenuit4kant-enklaretabellen.Debovenste2geveneentabelmet2of3kolommen.Deonderste2geveneentabelmetteksteneenafbeeldingnetjesnaastelkaaruitgelijnd.Keuzeuitfotolinksoffotorechts.Dezetabelvoegjemet1klikin.Daarnavervangjedefotodoorjeeigenfotoendetekstdoorjeeigentekst.Demakkelijkstemanieromtekstenafbeeldingennetjesuittelijnen.

HTMLinvoegenVoorgevorderden!MetdezeknopkunjeHTMLcodeinvoegeninjepagina.BijvoorbeeldvideovanVimeo.com,ofeenkaartvanGoogleMaps.ErbestaanallerleiapplicatiesenscriptsvanderdendiejemeteenzogenaamdeEMBEDcodeinjepaginakuntinvoegen.Diecodewordtaltijdverstrektdoordeleveranciervandeapplicatieofhetscript.Alsjeernietuitkomt,schakeldaneenvanonzewebmastersin.JebereiktzeviadeHelpdesk.

ZoekenenvervangenMetdezefunctiekunjeinjepaginanaartekstofwoordenzoekenofwoordenvervangen.

HTMLcodeweergevenVoorgevorderden!MetdezeknoptoonjedecompleteHTMLcodevanjepagina.JekunthierdecodebewerkenofHTMLcodeofscriptsinvoegen.Kijkuitmetdezefunctiewantjekanzomaarjepaginaomzeephelpenalsjenietweetwatjedoet.Zolangjenietsopslaatisernogniksaandehand.Alsjeernietuitkomt,schakeldaneenvanonzewebmastersin.JebereiktzeviadeHelpdesk.

20

PlakkenPlaknooitrechtstreekstekstuiteenWorddocument,webpaginaofanderprogrammarechtstreeksindeeditor.Jekopieertdanenormveelcodemeedienietindepaginathuishoort.Deopmaakvanjepaginagaatdanomzeep.Altijd“schone”tekstplakkenendaarnaopmakenindeeditor.Datdoejedusmetbovenstaandeknop.Kiestekstplakken(Pastetext).InhetschermwatdanverschijntplakjejetekstendanopOK.Detekstwordtnuschoonenzonderopmaakinjepaginageplakt.

TekstopmaakSelecteereenwoordofstuktekstenmaakdezevervolgensDikgedrukt,Schuingedrukt,Onderstreept,Doorgestreept,SuperscriptofSubscript.

Alinea-opmaakMetdeeerste2knoppenkunjeeenopsommings-lijstofeengenummerdelijstmaken.Metdelaatste2knoppenkunjetabsgebruiken:Inspringenenterugspringen.

Pop-Upafbeeldingkoppelen(Lightbox)EenLightboxiseenpopupschermwaarineengrotereversievaneenafbeeldingwordtgetoond.Klikeenreedsgeplaatstefotoaanindeeditor.Klikdaarnaopditicoontjeomeengroteversievandezeafbeeldingtekoppelen.DeafbeeldingisdanklikbaarenzaldegroteafbeeldingineenPop-Up(Lightbox)tonen.Grotefoto’skunjeuploadenonderAfbeeldingen/Pop-Upfoto’s.

SliderinvoegenMetdezeknopvoegjeeenvoudigeenslider(slideshow/fotocaroussel)injepaginain.Jekanookeensliderindeheadervanjesiteinvoegen.Ofzelfsvoorelkepaginaeenanderesliderindeheader.Meeroverhetmakeneninvoegenvanslidersopdepagina22vandezehandleiding.

21

ExterneHyperlinkmakenMetdezeknopmaakjeeenExterneHyperlink.Dezestuurteenbezoekerdoornaareenanderewebsite.Jekanzoweleenstuktekstofeenwoordalsookeenafbeeldingvoorzienvaneenhyperlink.SelecteereenwoordofregelofafbeeldinginjepaginaenklikopdeHyperlinkknop.Jekannuaandelinkerkantkiezenuiteennormalelinkofeenbutton.Standaardiseennormalelink.BijProtocolkiesjevoorhttpofhttpsenbijURLvuljevervolgenshetadresvandelinkin,bijvoorbeeld:www.novosite.nlDaarondervinkjeaan:OpeninNewWindow.(openinnieuwtabblad)zodatjeeigensiteookgeopendblijft.nukunjedelinkinvoegen.Jekanmetdezeknopookeene-maillinkmaken.HiervoorkiesjebijProtocolboveninvoorMailto:BijURLvuljedanjee-mailadresin,bijvoorbeeld:sales@novosite.nl

InterneHyperlinkmakenMetdezeknopmaakjelinksbinnenjeeigenwebsite.Jekanlinkennaarreedsbestaande:Paginas,Subpaginas,OnderliggendePaginas,ModulesenBestanden.Jekaneeninternelinkopeenstuktekstplaatsenofopeenafbeelding.Eersttekstofeenafbeeldingselecteren,danopditicoontjeklikkenenkiezenwaarnaarjewillinken.

YoutubevideoinvoegenDemakkelijkstemanieromvideoinjewebsiteteplaatsen.Alsjeeigenmateriaalinjesitewilplaatsen:Maakeersteen(gratis)accountaanbijYoutube.Vervolgenskunjedaarjevideo(s)uploaden.Daarnakunjezeinvoegeninjepagina.Datdoejedusmetdezeknop.JekanhierzoekennaarYoutubefilmpjeseninvoegen,maarmakkelijkerisnogomgewoononderaanbijURLdecompleteURLvandeYoutubevideoteplakken.Jezietdevideodaarnameteeninjepaginaverschijnen.Defilmpjeswordengeplaatstzondercookies,zodatjedewetAVGnietovertreedt.GrootvoordeelvanYoutubevideoisdatdezeplayeropalleplatformswerkt.Duselkebrowser,PCofMac,Tablet,Smartphone,Iphone,iPad.Allebezoekerskunnenjevideoafspelen.NadeelvanYoutubekanzijndatersomsreclamevoorjevideogeplaatstwordt.Alsdatechtgeenoptievoorjeis,neemdaneenaccountbijVimeo.com.Vergelijkbaredienstenookeenperfecteplayer,maargeenreclames.Kost50dollarperjaar.(opmomentvanditschrijven).VideosvanVimeokunjeinvoegenmetdeknopHTMLinvoegen.(ziehierbovenHTMLinoegen)

22

Undo/RedoOfteweldeOOPS!knop.Perongelukietsverwijderd:klikopdelinkerpijlenjelaatsteactiewordtongedaangemaakt.Klik2xenjelaatste2actieswordenongedaangemaakt.Klikopderechterpijlendelaatstverwijderdeactiewordtweerteruggehaald.Overigenswordenaljewijzigngenpasdefinitiefalsjedepaginahebtopgeslagen.

Pagina’s of Modules afschermen Jekaniederepaginaofmoduleafschermenmeteenwachtwoord.Voorpagina’ssteljeditwachtwoordinonderTrefwoorden/Instellingenvandebetreffendepagina.Depaginaofmoduleisnualleennogzichtbaarnahetinvullenvanhetjuistewachtwoord.Dezeloginmethodeistevensbeveiligd.Na5verkeerdepogingenwordtdetoegangvooreenuurgeblokkeerd.

23

Sliders maken en plaatsen Eenslider,ookwelslideshowoffotocaraousselgenoemd.Eensliderbestaatuitenkeleafbeeldingendieallemaalexacthetzelfdeformaathebben.Desliderlaatdeafbeeldingenvervolgensineenvoorafgekozentempozienmeteenovergangseffecttussendeafbeeldingen.Voorbeeld:ziedeheadervannovositedemo.nl

24

Gaalsvolgttewerk:NieuweslideraanmakenGanaarAfbeeldingenenklikopdeknopSliders.Maakeennieuweslideraan.-Kieseennaam(vooreigenherkenning,dezewordtnietgetoondaanjebezoekers)-Kieseenformaat:978iseenslidervoorindeheader,943iseensliderzobreedalsdepagina,etc.-Kiessnelheid:5000msis5seconden.Ditiseengoeduitgangspunt.-Volgorde:Opvolgend,dusinvolgordevanuploadenofwillekeurigevolgordebijhettonenvandefoto’s.-Effect:Overvloeien(fade),horizontaalopschuivenofverticaalopschuiven.-Kader:kiesvoorwelofgeenkader/randomdeslider.(Dezeinstellingenkanjeallemaalachterafnogaanpassen.)KlikSlideraanmaken.Foto’stoevoegenaandesliderNugaanwefoto’sindesliderzetten.Bijhetuploadenvandefoto’swordendefoto’sverkleindnaardebreedtediejevoordesliderhebtgekozen.Bijeenslidervan943pixelswordendusaljefoto’sautomatischverkleindnaar943pixels.Jekandeslidersdesgewenstvaneentekstvoorzien.Nahetuploadenziejedefoto’smeteenverschijnenenbewegenindeslider.Nukanhetzijndatjefoto’snietallemaaldezelfdeverhoudingbreedte/hoogtehebben.Zezijnnuduswelallemaalevenbreed,maarmisschiennietevenhoog.Datisnietmooinatuurlijk.Ditlosjeopdoordeafbeeldingbijtesnijden.Klikonderdeafbeeldingenopheticoontjebijsnijden.Jekanmetdezetoolalleafbeeldigenexactdezelfdehoogtegeven.Alsjetrouwenseenslidermaaktvoorindeheaderofeenslideroverdehelebreedtevandepaginadanmoetjesowiesodeafbeeldingenflinkbijsnijdenanderszijnzeveeltehoog.Hetbestezorgjedatjeheaderquahoogteonderde350pixelsblijft.SliderplaatsenJekanjegemaakteslidernuplaatsenineenvanjepagina’sofindeheadervanjewebsite.

Datdoejeindeeditormetditicoontje: KieshierdedoorjougemaaktesliderenklikopSliderplaatsen.Letop:Jezietdeslidernietbewegenindeeditor.Jezietditpasbijhetbekijkenvanjewebsite.Jezietdesliderindeeditoralseenafbeeldingmeteenwit-gestreeptkader.SliderswijzigenofverwijderenJekanaltijdachteraffoto’stoevoegenaanjeslideroffoto’sverwijderen.Elkewijzigingdiejemaaktaaneensliderisdirectopjewebsitezichtbaar.Jehoeftdesliderdusnietopnieuwintevoegen.Ookkunjeachterafdesnelheidofheteffectvaneenslideraanpassen.Wiljeeensliderverwijderenuitjepaginadanverwijderjegewoondeafbeeldingmethetwit-gestreeptekaderindeeditor.©NovositeBVNietsuitdezeuitgavemagzondervoorafgaandeschriftelijketoestemmingvandeuitgeverwordenopenbaargemaaktofverveelvoudigd,waaronderbegrepenhetreproducerendoormiddelvandruk,offset,fotokopieofmicrofilmofinenigedigitale,elektronische,optischeofanderevormof(enditgeldtzonodiginaanvullingophetauteursrecht)hetreproduceren(i)tenbehoevevaneenonderneming,organisatieofinstellingof(ii)vooreigenoefening,studieofgebruikwelk(e)nietstriktprivévanaardisof(iii)voorhetovernemeninenigdag-,nieuws-ofweekbladoftijdschrift(alofnietindigitalevormofonline)ofineenRTV-uitzending.