ZÉLF JE WORDPRESS WEBSITE MAKEN?

Transcriptie

1 WordPress website ZÉLF JE WORDPRESS WEBSITE MAKEN? WordPress Academy Nederland helpt je op weg met onze Basiscursus

2 INHOUD P 1 Het maken van een website P 2 Voor we beginnen P 3 Het inrichten van een website P 4 Het maken van Pagina s P 5 Home Pagina P 6 Overige Pagina s P 7 Paginatitel aanpassen (1) P 8 Paginatitel aanpassen (2) P 9 Submenu s maken P 10 Plug-ins (1) P 11 Plug-ins (2) P 12 Plug-ins (3) P 13 Plug-ins (4) P 14 Plug-ins (5) P 15 De Twenty Fourteen fotogalerij (1) P 16 De Twenty Fourteen fotogalerij (2) P 17 De Twenty Fourteen fotogalerij (3) P 18 Video s plaatsen (1) P 19 Video s plaatsen (2) P 20 Nieuws P 21 Social Media Widget (1) P 22 Social Media Widget (2) P 23 Widgets: Primaire sidebar P 24 Media Widgets (1) P 25 Media Widgets (2) P 26 Contact (1) P 27 Contact (2) P 28 Slider P 29 Logo plaatsen P 30 Gefeliciteerd! WordPress website

3 Het maken van een Website In dit E-book ga ik je stapsgewijs de opbouw van een website leren met WordPress. Net als in het E-Book Blog gaan we aan de slag met het WordPress Thema Twenty Fourteen. Het eerder gemaakte Blog ga ik nu ombouwen naar een website. Vergeet niet dat je teksten heel belangrijk zijn voor je website, zeker als je een website voor je bedrijf gaat maken. Een tip die ik je hiervoor kan geven is om de website van Arjan Jonker te bezoeken: Arjan is webtekstenschrijver en geeft (gratis) waardevolle tips! Gebruik goede kwaliteit foto s, wanneer je alleen nog aan het freubelen bent is dit niet nog belangrijk. Ga je zelf foto s maken of gebruik je foto s van anderen? Kijk uit met foto s van Internet afplukken i.v.m. auteursrechten. Je kan hier een flinke boete voor krijgen! Er zijn veel websites met Stockfoto s te vinden waar je een verscheidenheid van foto s kunt vinden. Bijvoorbeeld een website met gratis Stockfoto s: of een website met betaalde Stockfoto s: Het is handig om de handelingen die ik beschrijf meteen uit te voeren. Je kan gaan bepalen of je meteen een echte website gaat maken of dat het eerst oefenmateriaal wordt. En wees niet bang om zelf te ontdekken en proberen. Je leert tenslotte ook van de fouten die je maakt! Ben je er helemaal klaar voor? Dan gaan we beginnen. Succes! WordPress website 1

4 2 1 Voor we beginnen Naar aanleiding van de Blog die je gemaakt hebt met behulp van het E-book WordPress blog gaan we nu een stap verder en deze verder uitbouwen tot een website! 1. Wat je eerst doet is naar Weergave gaan en dan naar Aanpassen. Hiertussen staat Statische startpagina. Klik deze open en kies Een statische startpagina. 2. In dit venster verwijder ik ook de extra opties die ik eerder heb toegevoegd aan mijn Blog. De Titel en ondertitel heb ik hier aangepast passend bij mijn nieuwe website. Verdere veranderingen komen gaandeweg tijdens de opbouw van mijn website. De Tags in mijn berichten heb ik ook verwijderd om een schone Home pagina te krijgen. (Ik bepaal later wat ik wel of niet wil) Klik op Opslaan & publiceren. WordPress website 2

5 Het inrichten van een website Het is van belang dat je weet wat je wilt gaan communiceren met je website. Ik borduur verder met de paarden en maak er nu het zogenaamde manegebedrijf Lipydo van. Nu moet ik goed gaan bedenken hoe ik mijn website ga inrichten zodat het voor de bezoeker duidelijk is wat ik aanbied, waar ze me kunnen vinden, hoeveel een les kost etc. Om ideeën op te doen is het een aanrader om eerst websites van concurrenten te bezoeken om te zien hoe zij het hebben gedaan. Mijn website is niet echt en dient alleen als voorbeeld ook de teksten zijn daarom niet echt! Mijn Pagina s worden: 1. Home Dit wordt een algemeen en duidelijk verhaal over de manege en wat we voor jou als toekomstige klant kunnen betekenen. 2. Manege Lipydo Een (kort) verhaal over het ontstaan van de manege. Met hieronder (submenu) een uitgebreid dienstenaanbod en een prijslijst. 3. De paarden Het voorstellen van al die brave manege paarden, opgeleukt met mooie foto s. 4. Nieuws (huidige Blog) De evenementen die we organiseren mogen natuurlijk niet ontbreken, dit is ook handig om te weten voor onze huidige klanten. Uiteraard mogen de foto s van vorige evenementen hier ook niet ontbreken, zodat mensen die je website bezoeken zien dat je een leuke actieve manege bent die veel organiseert voor zijn klanten! 5. Contact Contactpagina met alle belangrijke cotactgegevens van de manege. Deze pagina titels kunnen* straks weergegeven in de navigatiebalk van je website, deze moeten dus kort maar krachtig zijn. * In het menu kan je deze titels aanpassen voor je navigatiebalk, dit leg ik nog uit verderop in dit E-book. WordPress website 3

6 2 1 3 Het maken van Pagina s We gaan nu de Pagina s maken die ik op de vorige pagina bepaald heb. Dit werkt hetzelfde als het maken van bericht. 1. Ga via je Dashboard naar Pagina s en dan naar Nieuwe Pagina. 2. Helemaal bovenin zit een uitklapvenster dat Scherminstellingen heet. Klap deze open en kijk of de vinkjes hetzelfde staan als op de afbeelding. Het gaat vooral om de Reacties optie. Scrol nu naar beneden in je browser. 3. Je ziet hier een veld waar je Reacties toestaan uit kan vinken en de optie daaronder ook. Ik wil op mijn Home pagina geen reacties. WordPress website 4

7 1 2 Home Pagina 1. Geef de gewenste titel aan je eerste pagina, deze wordt boven je artikel gezet. Straks in Menu s verander ik deze in Home. 2. Typ je tekst in het tekstveld. Plaats hierin eventueel foto s. Ik heb voor nu een uitgelichte afbeelding maar ga dit verderop in dit E-book nog veranderen in een Slider. 3. Je kan kiezen voor een Standaard template of Pagina in volledige breedte. Kies je voor de eerste dan kan je een sidebar rechts plaatsen met Widgets. Hier kom ik later nog op terug. Ik heb voor mijn Home Pagina de volledige breedte gekozen. 3 WordPress website 5

8 Overige Pagina s Maak ook alvast de overige pagina s waarvan je zeker weet dat je die in je website wilt hebben. Vergeet niet in het onderste venster Reacties de 2 vinkjes uit te zetten. Alleen wanneer je dat niet wilt natuurlijk! Ik maak alvast de menustructuur van de navigatiebalk om een leidraad te hebben. De uiteindelijke teksten maak Ik pas definitief als ik zeker ben van mijn uiteindelijke website structuur. Je hebt je Pagina s gemaakt? Ga dan naar Weergave en dan Menu s. Ik verwijder mijn gemaakte Categorieën uit de Menustructuur n.a.v. het vorige E-book: WordPress blog. Home staat er al in. Selecteer je Pagina s en voeg ze toe aan de Menustructuur. Sleep ze in de gewenste volgorde. Pas op dat je ze niet in een ander menu item sleept want dan krijg je een submenu. Hier kom ik later nog op terug. Ga nu naar je Berichten, dit gaat bij mij Nieuws heten. Ik maak een daarom een Categorie met de naam Nieuws. De Categorieën die ik eerder heb gemaakt voor mijn Blog en niet meer gebruik verwijder ik. Vervolgens open ik mijn eerder gemaakte berichten die ik nog wil gebruiken en vink in het Categorieën venster de Nieuws Categorie aan. Mijn Nieuws berichten wil ik toevoegen in mijn menu. Ga naar Weergave en dan Menu s. Klik het Categorieën venster open aan de rechterkant, selecteer de zojuist gemaakte Nieuws categorie en klik op Aan menu toevoegen. Versleep hem op de juiste plaats en klik op Menu opslaan. Vergeet niet regelmatig je website te checken om te zien wat er gebeurt en of het goed gaat! WordPress website 6

9 1 Paginatitel aanpassen (1) Je kan de titel van een menu-item aanpassen via het menu Menu s. Ik wil op de Home Pagina niet de titel HOME boven mijn artikel maar De gezelligste manege van Nederland. Tegelijkertijd wil ik wel dat de titel in de navigatiebalk HOME blijft heten! 1. Eerst verander ik de titel van de Home pagina vanuit het Pagina menu in de door mij gewenste titel: De gezelligste manege van Nederland. WordPress website 7

10 1 2 Paginatitel aanpassen (2) 1. Ga naar Weergave Menu s en lik in de Menustructuur de De gezelligste manege van Nederland open. Hier staat nu nog in het eerste venster Navigatielabel de titel van de pagina zelf. 2. Verander deze in Home. Sla het menu op. In de Navigatiebalk van je website staat nu HOME maar de pagina heeft de gewenste titel. WordPress website 8

11 Submenu s maken In je navigatiebalk kan je een Submenu maken. Onder Manege Lipydo wil ik een submenu Prijslijst maken. Eerst maak ik een nieuwe Pagina maken met als titel Prijslijst. In het tekstveld typ ik de prijzen die Manege Lipydo hanteert voor zijn diensten en klik Publiceer. Vervolgens ga ik naar Weergave Menu s. 1. Ik zie in het linker venster Pagina s mijn pagina Prijslijst staan: aanvinken en toevoegen aan het menu. 2. Nu staat hij in de Menustructuur en ik sleep hem op Manege Lipydo. De pagina Prijslijst is nu een submenu onder Manege Lipydo geworden. 3. Sla het menu op. In de navigatiebalk van je website zie je nu dit submenu. WordPress website 9

12 2 1 Plug-ins (1) 3 Je kan in je website extra functionaliteiten toevoegen d.m.v. Plugins. Veel van deze Plug-ins zijn gratis maar uiteraard ook veel betaalde. De betaalde zijn veelal uitgebreider, beter gemaakt en vaak veiliger. Wat zou jij willen toevoegen aan je website? 1. Ik ga zoeken naar een mooie fotogalerij voor een submenu onder Manege Lipydo: Rondleiding op onze manege. 2. Ga naar menu Plug-ins en open Nieuwe plug-in. Je ziet hier een zoekvenster en ik typ hier gallery in. Klik op Plug-in zoeken. Er verschijnt nu een enorme hoeveelheid gallery plug-ins. 3. Een plug-in gevonden? Klik op Nu installeren. WordPress website 10

13 2 1 Plug-ins (2) 1. Je krijgt nu dit Pop-up venster: Klik op OK 2. Klik op Plug-in activeren en je komt in het menu Geïnstalleerde plug-ins. Ik heb de plug-in Gallery Bank geïnstalleerd en krijg hier een pop-up venster van deze plug-in: Gebruik je Gallery Bank voor het eerst? Klik dan op deze link om meer te weten te komen. Natuurlijk doe ik dat. Deze plug-in is gratis omdat het de uitgeklede versie is. Voor meer opties moet je de Pro versie aanschaffen. Eerst maar eens uitproberen! WordPress website 11

14 1 Plug-ins (3) 1. De plug-in komt in je WordPress menu te staan en heeft heel veel verschillende mogelijkheden. Sommige opties zijn uitgeschakeld in deze gratis versie. Ik ga deze plug-in verder niet uitleggen omdat er al een uitgebreide handleiding bij aanwezig is. Het is een kwestie om deze goed te lezen en vooral, uit te proberen! WordPress website 12

15 1 Plug-ins (4) 1. Ik ben bezig geweest met het ontdekken en uitproberen van deze plug-in en ben tevreden met het resultaat op de website. Je kan kiezen voor wel of geen titel en/of omschrijving. Met deze plug-in kan je ook video s plaatsen. Er verschijnt een mooie Lightbox als je op een foto klikt in je website. Met miniaturen van de overige foto s aan de onderkant. Je kan hier doorklikken om de overige foto s te bekijken. WordPress website 13

16 1 2 Plug-ins (5) 1. Gallery Bank Via deze knop in een Pagina venster kan je direct een fotogalerij plaatsen in je pagina. Handig! 2. Gallery Bank shortcode toevoegen Dit venster verschijnt dan met diverse opties voor je galerij. WordPress website 14

17 1 De Twenty Fourteen fotogalerij (1) Binnen dit thema kan je ook een galerij maken. Deze ga ik maken voor bij Onze Paarden. Deze maak je via je berichten. Eerst maak ik een nieuwe categorie met de naam Onze Paarden. Vervolgens maak ik een bericht met dezelfde titel. Deze categorie komt in de navigatiebalk van de website. De pagina die ik eerder gemaakt heb komt hierdoor te vervallen. In het tekstveld van mijn nieuwe bericht typ ik eerst informatie en geef daaronder een enter. Klik nu op Media toevoegen In dit venster kies je voor de optie Galerij aanmaken. 2. Klik op Bestanden selecteren. Op mijn bureaublad staat een map met foto s klaar en ik heb ze voorzien van een titel zonder.jpg omdat deze anders getoond worden. Selecteer de foto s die je hebben wilt. 3. Klik op Een nieuwe galerij aanmaken. 3 WordPress website 15

18 1 3 2 De Twenty Fourteen fotogalerij (2) Je foto s worden geüpload en staan nu in de Mediabibliotheek met vinkjes linksboven. Klik nu op de blauwe knop Een nieuwe galerij aan maken. Je komt dan in het onderstaande venster Galerij bewerken terecht. 1. Je kan hier de afbeeldingen in een andere volgorde verslepen. 2. Je foto s voorzien van een onderschrift. 3. Een keuze maken wat er gebeurt als je op een foto in je browser klikt. Bijlagepagina: Foto in berichtvorm met titel, onderschrift en reacties. Mediabestand: Foto wordt getoond in je browser (zonder onderschrift). 4. Klaar? Klik op Galerij toevoegen. Je galerij staat nu in je tekstveld van je bericht. 4 WordPress website 16

19 De Twenty Fourteen fotogalerij (3) 1. Wanneer je op een afbeelding klikt verschijnen er 2 icoontjes: een potlood en een kruisje. Klik op het potlood en je komt bij het galerijvenster om te bewerken. Met het kruisje verwijder je de foto uit de galerij. 2. Klik in het Notatie venster de Galerij optie aan en dan Bijwerken (3) Ga nu naar Weergave en vervolgens naar menu s. In de Menustructuur klik ik (de pagina) Onze Paarden open en verwijder deze. Klik Categorieën open. Voeg de categorie Onze Paarden toe en sleep deze op de gewenste plaats in de Menustructuur. Klik op Menu opslaan. Bekijk het resultaat in je website. WordPress website 17

20 Video s plaatsen (1) 1 Terwijl ik met mijn website bezig ben kom ik op ideeën. Om mijn klanten (en website bezoekers) wat extra s te bieden heb ik besloten om video s te plaatsen. Dit ga ik doen via mijn YouTube kanaal waar ik een account heb. Het grote voordeel hiervan is dat je website veel minder zwaar wordt. Je gebruikt immers de server van YouTube. Hier laad ik een lesfilm die ik heb gemaakt met mijn Iphone. 1. Wanneer je een film hebt geüpload kan je hem delen via diverse social media en daaronder een URL. Deze kopieer je straks in je nieuwe bericht. WordPress website 18

21 1 Video s plaatsen (2) Ik maak een nieuwe categorie aan in het Berichten menu en noem deze Klaslokaal. Hierna maak ik een Nieuw bericht met de titel van de les. 1. In het tekstveld kopieer ik de URL van YouTube. 2. In het Notatie venster de optie Video selecteren. 2 Selecteer de categorie Klaslokaal en Publiceer. Ga via het Weergave menu naar Menu s. Klik het categorieën venster open, selecteer Klaslokaal en dan Aan menu toevoegen. In de Menustructuur sleep ik hem achter Onze paarden. Vergeet niet om regelmatig je website te controleren of het goed gaat en dat het naar je zin is! WordPress website 19

22 1 Nieuws Dit is voorheen mijn Blog geweest wat ik nu Nieuws genoemd heb. Hier worden alle nieuwtjes, evenementen e.d. vermeld. Evenementen zullen ook via Social Media aangekondigd worden, want de Manege heeft een speciale pagina op Facebook gemaakt. Nu bedenk ik mij dat het handig is om mijn Social Media accounts op mijn website te hebben en dat brengt mij bij het volgende punt wat ik ga beschrijven: een Social Media Widget. 1. Dit is mijn eindresultaat. Op de volgende pagina s ga ik vertellen hoe ik het gedaan heb. Vergeet niet om te controleren of je icoontjes werken en de goede linkjes hebben binnen je website. WordPress website 20

23 1 Social Media Widget (1) In dit template zit links en rechts een sidebar waar je bv. een extra menu, kalender, galerij etc. kunt plaatsen d.m.v. een Widget (rechts niet wanneer je voor je Pagina de volledige breedte hebt gekozen!). Zoals gezegd wil ik mijn Social Media accounts op mijn website hebben. 1. Eerst ga ik in het menu item Nieuwe Plug-in zoeken naar Widgets en kies Social Media Widget by Acurax. Ik klik eerst op Details om de beschrijving te lezen en installeer de widget om te kijken of ik het wat vind. 2. Na de installatie krijg je een venster dat de installatie succesvol is. Hij staat nu links in het menu. 3. Ga naar de Social Media Widget Settings. WordPress website 21

24 Social Media Widget Settings 5 1. In dit settings menu kan je een thema voor je icoon kiezen. 2. De afmeting van je icoontje instellen. 3. De volgorde veranderen. 4. De adressen van de verschillende Social Media accounts invullen. 5. Alles ingevuld? Klik op Save Changes. De volgende stap is Weergave en dan Aanpassen. WordPress website 22

25 1 Widgets: Primaire sidebar Klik Widgets: Primaire sidebar open 2. Klik + Widget toevoegen, er opent een lijst met widgets en klik op Social Media Widget by Acurax. 3. Er verschijnt nu een venster waar je de gewenste titel kan invullen. De afmeting en uiterlijk van de icoontjes kan veranderen. De uitlijning kan bepalen: links, gecentreerd of rechts. Hiermee overschrijf je de eerder gemaakte instellingen binnen deze Widget. 4. Vervolgens kan je bepalen wat je nog meer wilt plaatsen. 5. Wanneer je het scherm inklapt kan je zien wat je hebt gedaan. Tevreden? Klik Opslaan & publiceren. WordPress website 23

26 Media Widgets (1) Bij de pagina s klaslokaal en Nieuws van mijn website ga ik In de rechter sidebar video Widgets plaatsen. Ga naar Weergave en dan Aanpassen Klik sidebar open. 2. Klik Widget toevoegen. 3. Kies in het venster dat nu verschijnt de widget Twenty Fourteen Ephemera. 4. Je krijgt dan opties om in te vullen: Titel, Aantal berichten om te tonen en Berichtenformaten om te tonen: Video in dit geval. Je laatste bericht met de deze notatie zal hier worden weergegeven. 4 Deze handeling herhaal ik voor een Galerij Widget eronder. Bij Berichtenformaten kies ik Galerij. WordPress website 24

27 1 Media Widgets (2) Terwijl ik mijn widgets in de rechter sidebar plaats merk ik dat mijn pagina s niet meer op volledige breedte staan. De pagina s waar ik geen sidebar wil hebben moet ik daarom opnieuw openen en: 1. Bij Pagina attributen de optie Sjabloon de Standaard template weer terugzetten naar Pagina in volledige breedte. WordPress website 25

28 1 Contact (1) 2 Nu ga ik mijn contact pagina vormgeven. Eens kijken of hier ook een plug-in voor te vinden is. Volg hiervoor dezelfde stappen als eerder beschreven voor een galerij en de Social media widget, maar nu met de zoekterm contact. Ik vind Contact Bank van dezelfde ontwikkelaar als de gallery. Ook dit is een uitgeklede gratis versie. Dat wordt weer lezen en ontdekken. 1. Ik ga naar de Contact pagina die ik al gemaakt had en voeg hier het contact formulier aan toe via de knop Add Contact Bank Form. Hier selecteer je het formulier die je via deze plug-in gemaakt hebt. 2. De shortcode van het formulier staat nu in je tekstveld. WordPress website 26

29 Contact (2) 2 In mijn Contact pagina heb ik een uitgelichte afbeelding geplaatst. Dit is een schermafbeelding van de locatie in Google Maps. Staat leuk en mensen zien meteen je locatie. Hier zijn ook Plug-ins voor te vinden Hier staat het telefoonnummer en een adres als link. Dit heb ik uitgelegd in ons vorige E-book WordPress blog. 2. Met hieronder het contactformulier. WordPress website 27

30 1 Slider Op mijn Home pagina wil ik een Slider plaatsen. Dit heb ik al uitgelegd in het E-book WordPress Blog. Verwijder eerst de uitgelichte afbeelding in je Home pagina (als je die hebt). Geef je berichten die je in een slider wilt weergeven een Tag. 1. Ga naar Weergave en dan Aanpassen. Klap Uitgelichte inhoud open. Kies bij Layout Slider en typ de Tagnaam. De slider komt alleen op je Home pagina te staan. WordPress website 28

31 1 Logo plaatsen 2 Dit thema mist helaas de optie om een logo te kunnen plaatsen. Je eventuele bedrijfsnaam kan alleen met tekst en dat is jammer... Ik ga de Kopafbeelding in het Weergave Aanpassen menu gebruiken om mijn logo te kunnen plaatsen. Ik maak een afbeelding (1260px bij 240px) in Photoshop met het logo. Nu heb ik het voordeel dat ik met dit programma kan werken. Wanneer jij dit niet kan heb je misschien iemand in je omgeving die je kan helpen. Toon site titel & tagline vink ik uit in dit menu onder Website en ondertitel. 1. Kopafbeelding open klikken. 2. Nieuwe afbeelding toevoegen Kies het bestand dat je wilt toevoegen. Je kan je afbeelding bijsnijden in het Mediabibliotheek venster voordat je hem plaatst. WordPress website 29

32 Gefeliciteerd! En? Hoe is je website geworden? De gratis templates van WordPress zelf hebben verder weinig mogelijkheden om je website vorm te geven, zoals kleuren en letter types aanpassen. Bij een DOE HET ZELF WEBSITE van WordPress Academy Nederland kan dit wel! En nog veel meer! Een website maken is best veel werk, daar ben je inmiddels wel achter gekomen. Vind je het echt teveel gedoe? WordPress Academy Nederland heeft, behalve de DOE HET ZELF WEBSITE ook het pakket KANT EN KLAAR WEBSITE. Alle content wordt dan voor je geplaatst in een modern WordPress thema*. Je website wordt vormgegeven naar jou wensen. Het enige wat jij moet doen zijn je wensen aan ons doorgeven en voor de inhoud zorgen. Meer informatie of vragen? Mail dan naar: * Voor websites gemaakt met dit thema kan je kijken op de Studieresultaten pagina van WordPress Academy Nederland. << >> WordPress website 30