Download handleiding mobiele website maken

[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam

1

✓ Perfect zichtbaar op alle mobiele apparaten

✓ Makkelijk zelf te beheren CMS systeem

✓ Professioneel design


Google zet mobiel- vriendelijke

websites hoger

Vele malen gebruiks-

vriendelijker

De perfecte website voor

alle apparaten

Iedereen is mobiel

Handleiding voor uw website


2

Uw website perfect zichtbaar

op alle mobiele apparaten

INHOUDSOPGAVE1: Introductie 1.1: Inloggen op uw website 3 1.2: Menubalk 3 1.3: Belangrijke punten 3 1.4: Wat kunt u zelf aanpassen? 4

2: Berichten 2.1: Nieuw bericht toevoegen aan uw website 5 2.2: Afbeeldingen toevoegen aan uwwebsite 5 2.3: Categorie kiezen bij een artikel 6 2.4: Uitgelichte afbeelding kiezen voor een artikel 6 2.5: Reacties van bezoekers bewerken 6

3: Pagina’s 3.1: Naar de pagina’s navigeren 7 3.2: Enkele pagina bewerken 8 3.3: Visuele bewerker van pagina’s gebruiken 9 3.4: Tekst nooit van websites of Word kopiëren 10 3.5: Teksten veilig uit Word halen 10 3.6: Ontwerpopties binnen het bewerkingsmenu 11

4: Navigatie menu 4.1: Toevoegen van menu items 12 4.2: De opbouw van de menu structuur 12 4.3: Titel aanpassen van menu 134.4: Pagina aan menu toevoegen 13

5: Toevoegen van tekstblokken 5.1: Tekstblokken dupliceren 13

6: Toevoegen van media 6.1: Toevoegen van afbeeldingen / video / PDF’s / muziek aan de Media map 14 6.2: Toevoegen van afbeeldingen / video / PDF’s / muziek op een bericht of pagina 14

7: Widget: Envira Gallery 7.1: Gallery of album aanpassen 15 7.2: Galerij aanpassen 16 7.3: Een nieuwe galerij toevoegen 16 7.4: Nieuw Envira Album aanmaken 17 7.5: Toevoegen van een galerij aan een album 18

8: Widget: Tablepress 8.1: Tabellen aanpassen in menu Tablepress 18 8.2: Tabellen aanpassen of uitbreiden 19 8.3: Tabel toevoegen 19 8.4: Excel tabel Importeren 20

9: Widget: Foodpress 9.1: Een menukaart aanpassen of uitbreiden 20 9.2: Menu Item toevoegen 21 9.3: Content aanpassen in menu item 22

10: Widget: Kiwi (logo) slider 10:1: Logo slider bewerken 22 10.2: Hoofdmenu Kiwi (logo) Slider 23 10.3: Nieuw logo toevoegen 23 10.4: Logo’s aanpassen 24

11: Widget: Meta slider 24

12: Widget: Revolution slider 12.1: Overzicht menu Revolution Sliders 25 12.2: Revolution slider settings aanpassen 26


3

Van alle Nederlanders heeft 71 % een

smartphone

1: INTRODUCTIE

1.1: Inloggen op uw website Ga naar uw eigen domeinnaam en type daarachter /wp-admin. Bijvoorbeeld: http://www.domeinnaam.nl/wp-admin Onderstaand scherm verschijnt, daar kunt u inloggen met de inloggegevens die u van ons heeft gekregen in de livemail.

1.2: Menubalk Zodra u bent ingelogd ziet u aan uw linkerkant een donkere menubalk. In dit menu staan alle verschillende opties om de website aan te passen. De opties die in uw menubalk staan, zijn afhankelijk van de content die u op uw website heeft. Bijvoorbeeld de optie ‘Envira Gallery’ die hiernaast te zien is. De werking hiervan wordt erlders in deze handleiding omschreven.

1.3: Belangrijke punten Er zijn een aantal zaken waarop gelet moet worden bij het werken binnen Wordpress:

Teksten overnemen uit Word. Bij het toevoegen van teksten, kan er niet direct vanuit Word of een website worden gekopieerd. Dit heeft als reden dat anders de opmaak van Word wordt overgenomen. Lees het hoofdstuk 3.3: Tekst nooit van websites of Word kopiëren voor een uitgebreide uitleg over het toevoegen van teksten.

Visuele en tekstuele bewerker. Bij het aanpas-sen van teksten en afbeeldingen, is er de optie om de website aan te passen in een visuele en een tekstuele bewerker. Wij raden u aan om alle aanpassingen door te voeren in de visuele bewerker. Dit is overzichtelijker en hier zijn geen codes in visueel aanwezig. Bekijk het hoofdstuk 3.3: Tekst nooit van websites of Word kopiëren, voor een uitgebreide uitleg.

Inloggen: inlogscherm

Menubalk: donkere menubalk


4

Een mobiele website heeft een andere

gebruikerservaring dan een ‘normale’

website

1.4: Wat kunt u zelf aanpassen?Er zijn een aantal zaken waarbij we u vragen onze hulp in te schakelen. Gelukkig kunt u bij het bewerken van de website het meeste zelf uitvoeren.

Actie Zelf Site afhankelijk Alleen Bureau feithTeksten aanpassen X Teksten toevoegen X Tekstblokken toevoegen X Lettertype aanpassen XInline tekstkleur aanpassen X Afbeeldingen aanpassen X Afbeeldingen aan Wordpress toevoegen X Pagina’s aanmaken X Berichten aanpassen X Berichten aanmaken X Widgets aanpassen XReacties bekijken en goedkeuren X Achtergrondkleur X Rijen aanpassen(aantal rijen) XRevisies terugzetten X Portfolio items aanmaken X Portfolio instellingen XMarges aanpassen XStructuur van de site aanpassen XTabellen aanpassen X Tabellen toevoegen X Items voor een voedselmenu toevoegen X Logo’s aan slider toevoegen X Header slider aanpassen XFoto’s aan galerij toevoegen X Galerijen toevoegen X Albums aanmaken X


5

Iedereen is mobiel

2: BERICHTEN

Heeft uw website een nieuws- of blogpagina dan kunt u een nieuw bericht plaatsen in de Berichten pagina.

2.1: Nieuw bericht toevoegen aan uw websiteWanneer u een nieuw bericht gaat maken, moet u naar berichten en dan naar Nieuw bericht. Uw krijgt nu een nieuwe pagina te zien waar een aantal velden ingevuld kunnen worden:

1. Titel balk: Dit is de smalle balk boven aan de pagina. De titel die het bericht moet krijgen, kan hier worden geplaatst.2. Content vlak: Dit is het grote vlak onder de titelbalk. Hier komt de hoofdcontent van het bericht zoals tek-sten en afbeeldingen.

Zodra u de content heeft geplaatst, kun u het bericht publiceren. Dit kan door op de blauw knop te drukken.Als het bericht niet gepubliceerd is, staat er in deze knop ‘publiceren’. Na publicatie verandert de tekst in deze knop naar ‘bijwerken’.

De knop publiceren/bijwerken kan gebruikt worden om het bericht te publiceren op de website, of als u aanpassingen door wil voeren die zojuist gedaan werden.

2.2: Afbeeldingen toevoegen aan websiteHet toevoegen van een afbeelding aan een nieuwsbericht kan via het kopje ‘Media toevoegen’. Voor een uitgebreide uitleg over het toevoegen van afbeeldingen, kunt u kijken naar het hoofdstuk 6: toevoegen van media.

Berichten: menu berichten

Berichten: menu bericht bewerken


6



BERICHTEN

2.3: Categorie kiezen bij een artikel In de berichten pagina kunt u het artikel linken aan een bepaalde categorie. Als uw website verschillende categorieën heeft dan hebben wij deze voor u aangemaakt. Het meegeven van de goede categorie zorgt ervoor dat het bericht op de goede locatie wordt geplaatst.

2.4: Uitgelichte afbeelding kiezen voor artikel In het geval van blogberichten, kan het zo zijn dat er een afbeelding zichtbaar moet zijn, voordat mensen het blogbericht openen. Deze afbeelding heet een uitgelichte afbeelding. Een uitgelichte afbeelding kan toegevoegd worden vanuit de rechterbalk. U klikt op Uitgelichte afbeelding instellen en voegt de foto toe.

Voor een uitgebreide uitleg over het toevoegen van afbeeldingen, kunt u kijken naar het hoofdstuk 6: Toevoegen van media.

2.5: Reacties van bezoekers bewerken Als uw bezoekers kunnen reageren op uw nieuws-berichten, verschijnen deze reacties in de menubalk onder het kopje reacties. Deze reacties moeten soms goedgekeurd worden of misschien wilt u er wel eens eentje verwijderen.

Het reageren, verwijderen of toelaten van berichten kan gemakkelijk vanuit het overzicht. Wanneer je met je muis over het bericht heen gaat, ziet u het bewer-kingsmenu. Daar kunt u een keuze maken tussen de verschillende opties.

Berichten: Uitgelichte afbeelding

Berichten: Menu categorieën

Berichten: Menu reacties


7

PAGINA’S

3.1: Naar de pagina’s navigeren Om pagina’s te kunnen beheren gaat u in de menubalk naar Pagina’s. Hier vindt u alle pagina’s die op de website aanwezig zijn (bijvoorbeeld de pagina’s uit de navigatie). Door op de titel van de pagina te klikken, kunt u deze pagina bewerken.

1. Nieuwe pagina: Wanneer u op deze knop klikt, opent zich een nieuw scherm. Dit is de nieuwe pagina die u dan kunt maken.2. Enkele pagina: Iedere rij in dit blok is een aparte pagina. Elk van deze pagina’s is hier aan te passen.a. Bewerken: Als u hier op klikt, opent de pagina en kunt u deze aanpassen.b. Snel bewerken: Hier kunt u kleine aanpassingen aanpassen zoals de title van de pagina aanpassen of de pagina op onzichtbaar zetten.c. Prullenbak: Wanneer u op deze knop klikt, wordt de pagi-na in de prulenbak geplaatst.

d. Bekijken: Hier kunt u de pagina bekijken zoals die op de website verschijnte. Kopieer: U kunt ervoor kiezen om een pagina te kopië-ren. Dit is handig wanneer u een soortgelijke pagina wil toevoegen. De kopie verschijnt onder dezelfde naam als het origineel, maar de tekst con-cept zal er echter achter staan (zie punt 3). 3. Concept: Wanneer een pagina de status concept heeft, zal deze pagina niet actief zijn. Pas wanneer deze wordt gepubliceerd, zal de pagina pas zichtbaar worden op de website.

4. Filter: Wanneer u veel pagina’s, kunt u de filters ge-bruiken om te zoeken naar een pagina5. Zoeken & pagina: Door de zoekbalk te gebruiken, kunt u een bestaande pagina zoeken. Ook kan er onder de zoekbalk naar de volgende pagina wor-den gegaan.6. Auteur: Hier is zichtbaar wie de pagina heeft aangemaakt.7. Datum: De datum dat de pagina is aangemaakt / aangepast

Iedereen is mobiel

➊

➋

➌

❹

➏ ➐


8



PAGINA’S

3.2: Enkele pagina bewerken Wanneer u een pagina gaat bewerken opent het onderstaande scherm.

1. Nieuwe pagina: Wanneer u op deze knop klikt, opent zich een nieuw scherm. Dit is de nie uwe pagina die u dan kunt maken.2. Titel: Dit is de titel van de pagina. In sommige gevallen is dit ook de titel die boven de pagina staat. Als dit niet het geval is, staat de titel in een van de eerste blokken van de content (zie punt 5)3. Permalink: Hier kunt u de link naar de pagina aanpas-sen, de pagina bekijken of een kortere link krijgen

a. Bewerken: Wanneer u op bewerken klikt, kunt u de naam die de pagina krijgt aan-passen. Dit kan wel problemen opleveren, aangezien er links kunnen zijn die naar die speci-fieke link verwijzen. Het is dus niet aan te raden om dit aan te passen.b. Pagina bekijken: Wanneer u op deze knop klikt, opent de pagina zoals die op de website zichtbaar is.c. Verkorte url verkrijgen: Hier kunt u een kortere link naar de pagina krijgen. Dit is

gemakkelijk wanneer er een lange link.4. Bewerkingsopties: In dit menu is het mogelijk om nieu-we blokken toe te voegen. Wij raden het niet aan om deze opties te gebruiken, tenzij u weet wat u doet.5. Content: De content van de pagina is opgebouwd uit blokken. Op deze manier zit de content op een overzich-telijke manier over de pagina verdeeld.a. Aanpassen: Als u hier op klikt, kunt u de content aan-

passen (zie PAGINA’S – Enkele pagina – Visuele bewerker)b. Kopieren: Door op kopië-ren te klikken, dupliceert u het blokc. Verwijderen: Hier kunt u de blokken verwijderen. 6. Publiceren: In dit menu kunt u de pagina publiceren / bijwerken.


9


smartphone

PAGINA’S

3.3: Visuele bewerker van pagina’s gebruiken Om het aan te passen, moet je met je muis over een element heen gaan. Dan verschijnt onderstaand

1. Titel: De titel van het blok kan hier geplaatst worden. Als de titel hier niet staat, kunt u deze in de content vinden (zie punt 4)2. Media toevoegen: Hier kunt u media toevoegen (zie het hoofdstuk media toevoegen)3. Bewerkingsopties: Door gebruik te maken van de bewerkingsopties, kunt u de content in het content-blok aanpassen. Voor meer informatie over de bewer-

kingsopties, kunt u kijken naar Bewerken van een element – TEKST – Ontwerpopties4. Contentblok: Hier staat alle content van het blok5. Automatisch alinea’s toevoegen: Deze opties zorgt ervoor dat er automatisch ali-nea’s in uw tekst verschijnen6. Verwijderen en kopiëren: Hier kunt u het blok mee ver-wijderen of kopiëren7. Navigeren: Met deze optie kunt u navigeren tussen de verschillende blokken, of het blok sluiten. Wanneer u het

blok op deze manier sluit, worden de wijzigingen niet opgeslagen8. Visuele en tekstuele bewerkera. Visuele bewerker: Dit is de beste manier teksten en afbeeldingen aan te passen. U ziet wat u doet en u heeft geen last van codesb. Tekstuele bewerker: Dit is de weergave waar de codes zichtbaar zijn. Wij raden het alleen aan om in de tekstuele bewerker te werken als u

verstand heeft van codes.9. Publiceren: In dit menu kunt u de pagina publiceren / bijwerken.10. Bijwerken: Als u hier op bijwerken drukt, slaat u de wijzigingen op van het blok. Om deze wijzigingen definitief door te voeren, hoeft u alleen nog de pagina op te slaan.


10

Iedereen is mobiel

PAGINA’S

3.4: Tekst nooit van websites of Word kopiëren Alle tekstuele aanpassingen moeten direct in

Wordpress gedaan worden. Teksten kunnen dus niet rechtstreeks vanuit Word gekopieerd worden. De reden hiervan is dat Word de tekst een opmaak mee geeft die de opmaak van de website overschrijft. Hierdoor komen teksten er anders uit te zien dan de huidige teksten op de site.

3.5: Teksten veilig uit Word halen Plak alle teksten eerst over in het programma kladblok dat op iedere pc staat.

Gebruikt uw een Apple? Dan gebruikt u hiervoor het programma ‘Teksteditor’ en voert u nog een extra stap uit: ga naar het menu opmaak, boven in het scherm en kies ‘converteer naar platte tekst’. U ziet dat de tekst is omgezet naar een ander lettertype.

Tekst dat in kladblok is geplakt of is omgezet in het programma teksteditor van Apple, heeft geen opmaak regels die eventueel zouden worden opgepikt in uw website. Het is dus veilig om vervolgens deze tekst in uw website te verwerken.

Controleer of de eerste pagina die u heeft aangepast nog goed wordt weergegeven voor u andere pagina’s aanpast, zodat u er zeker van bent dat u voorgaande stappen goed heeft uitgevoerd.

Pagina’s: extra stap voor ‘teksteditor’ met een Apple.

Pagina’s: Menu tekst blok settings. Zet het bewerkingsmenu op Tekst in plaats van Visueel als u tekst gaat plakken uit kladblok.


11



3: PAGINA’S

3.6: Ontwerpopties binnen het bewerkingsmenuHieronder staan alle ontwerpopties binnen het bewer-kingsmenu. Het is belangrijk dat dit scherm op visueel (16) staat en niet op tekst (17). De tekstuele bewerker is namelijk het gedeelte waar de codes zitten.

1. Media toevoegen: Het toevoegen van foto’s, video’s of muziek aan het tekstblok2. Bold: Zorgt ervoor dat de geselecteerde tekst wordt dikgedrukt3. Italic: Zorgt ervoor dat de geselecteerde tekst wordt schijngedrukt4. Doorgehaald: Zorgt ervoor dat de geselecteerde tekst wordt doorgehaald5. Ongeordende opsomming: Zorgt ervoor dat de geselec-teerde tekst wordt opgesomd door middel van bulletpoints6. Geordende opsomming: Zorgt ervoor dat de geselec-teerde tekst wordt opgesomd door middel van cijfers7. Blockquote: Zorgt ervoor dat de tekst een blockquote wordt.

8. Horizontale lijn: Voegt een horizontale lijn toe op de geselecteerde plek9. Links uitlijnen: Lijnt de geselecteerde tekst links uit10. Gecentreerd uitlijnen: Lijnt de geselecteerde tekst in het midden uit 11. Rechts uitlijnen: Lijnt de geselecteerde tekst rechts uit12. Link toevoegen / bewerken: a. Wanneer er niets is gese-lecteerd, kan er een nieuwe link worden aangemaakt b. Wanneer er een tekst is geselecteerd, kan de tekst in de link wordt veranderdc. Wanneer een link is aan-gepast, kan de link worden aangepast13. Link verwijderen: Wanneer een link is geselecteerd, kan

deze knop ervoor zorgen de dat link wordt verwijderd.14. Lees meer tag: Bij een blok kan een lees meer tag worden gebruikt om het einde van de previewtekst aan te geven15. Werkbalk weergeven / verbergen16. Visuele modus: Het schem omzetten in visuele modus. Dit is de modus waar dit scherm nu in staat17. Tekst modus: Dit is de modus met codes. Wanneer u niet bekend bent met codes, kunt het het beste in visuele modus blijven werken.18. Tekst selectie: Zorgt ervoor dat de geselecteerde tekst een opmaak krijgt. Dit kan een alinea zijn, of verschil-lende soorten headers.

19. Onderstrepen: Zorgt ervoor dat de geselecteerde tekst wordt onderstreept20. Uitvullen: Zorgt ervoor dat de tekst de volledige ruimte gebruikt21. Tekstkleur: Zodra een tekst is geselecteerd, kan de tekstkleur aangepast worden 22. Plakken als tekst: Plakt tekst23. Opmaak verwijderen: Verwijdert de opmaak24. Speciale karakters: Laat een lijst met speciale karak-ters zien25. Inspringen verkleinen: Springs in naar links26. Inspringen vergroten: Springs in naar rechts


12


smartphone

4: NAVIGATIE MENU

4.1: Toevoegen van menu itemsHet toevoegen en verwijderen van items in het navigatie menu kan via weergave en dan menu’s.

4.2: De opbouw van de menu structuurHieronder staat een voorbeeld van een menustructuur. Alle items die hier staan, staan ook in de navigatie van de website. De hoofdmenu items ➊ zijn de items die direct zichtbaar zijn. De subitems ➋ zijn de pagina’s die daaronder vallen. Om de volgorde te wisselen of om van een hoofditem een subitem te maken, hoef je enkel de muis ingedrukt houden en het menu item op de goede plek te slepen.

Navigatie menu: ga naar ‘Weergave’ in de zwarte balk links in het scherm en kies ‘Menu’s’ om menu items te wijzigen.

Navigatie menu: in de linker kolom staat het navigatie menu pagina’s hierover leest u op de volgende pagina. De rechter kolom geeft de structuur weer. Het balkje dat inspringt ( ) is een submenu zoals te zien is in de menubalk onderaan deze pagina.

Navigatie menu: de hoofdmenu items ➊ zijn de items die direct zichtbaar zijn. De subitems ➋ zijn de pagina’s die daaronder vallen.

Navigatie menu: dit ziet er op de website uit zoals hierboven.

➊

➊

➊

➊

➊

➋


13



website

4: NAVIGATIE MENU

4.3: Titel aanpassen van menuOm de titel van een menu item aan te passen, moet je aan de rechterzijde op het pijltje omlaag te klikken. Dan klapt het menu uit en verandert het pijltje. In het naviga-tielabel kan de tekst dan aangepast worden.

Navigatie menu: klik op het pijltje naast ‘pagina’ omlaag en verander de titel van de titel in het uitgeklapte venster.

Navigatie menu: Kopieer een artikel door deze knop aan te klikken. Je hoeft dan alleen de tekst en foto’s te vervangen.

Navigatie menu pagina’s

4.4: Pagina aan menu toevoegen Aan de linkerzijde van de pagina vind je het menu met alle pagina’s erin. Wanneer je hier een pagina aanvinkt, en daarna op menu toevoegen klikt, verschijnt de pagina onderaan in de menustructuur. Vanaf daar kan het item op de goede plek worden ge-sleept (zoals op de vorige pagina omschreven).

5: TOEVOEGEN VAN TEKSTBLOKKEN

5.1: Tekstblokken duplicerenEen eenvoudige manier om een tekstblok toe te voegen is door een ander bestaand tekstblok op de pagina te dupliceren. Het voordeel hiervan is dat de opmaak van de tekst hetzelfde is als het blok dat wordt gedupliceerd. Voor meer informatie over het dupliceren en/of aanpassen van tekst leest u hoofdstuk 3.2 Bewerken van een element.

Als u ervoor kiest een tekstblok te kopiëren, dan is het zorg u er eventueel voor dat deze op de juiste plaats staat in het menu (hoofdstuk 11.2) en past u de content aan van het nieuwe artikel. Hier is belangrijk dat er niet rechtstreeks vanuit Word wordt gekopieerd.


14

Iedereen is mobiel

6: TOEVOEGEN VAN MEDIA

6.1: Toevoegen van afbeeldingen / video / PDF’s / muziek aan de Media mapHet toevoegen van media aan de bibliotheek, kan in de menubalk bij Media en daarna Nieuw bestand. Wanneer u dat heeft gedaan, opent zich een nieuw scherm. Klik hier op Bestanden toevoegen. Vanaf hier kunt u afbeeldingen vanaf uw computer uploaden. Heeft u een bestand ge-upload dan wordt deze in uw bibliotheek geplaatst.

Wanneer u de link van een bestand in de bibliotheek wilt achterhalen, kunt u binnen de bibliotheek op een bestand klikken. Dan opent er een pop-up van het bestand. Aan de rechter zijde vindt u dan de link (URL) van het bestand. Deze URL kan bijvoorbeeld worden gebruikt wanneer je naar de afbeelding wil verwijzen, of wanneer er een link naar een PDF gemaakt moet worden. Lees ‘3.5: Ontwerpopties binnen het bewer-kingsmenu’ als je wilt weten hoe je een link toevoegd.

6.2: Toevoegen van afbeeldingen / video / PDF’s / muziek op een bericht of paginaAls u een afbeelding of een video wilt toevoegen aan uw pagina dan kunt u dit doen met de button “Media toevoegen”. Vanaf hier kunt u kiezen om een afbeel-ding uit de bibliotheek te kiezen of een afbeeldingen vanaf uw computer te uploaden. Als u een afbeelding heeft geüpload, komt deze in de bibliotheek te staan, in het menu item media.

Als u een afbeelding heeft geselecteerd, verschijnt er aan de rechterzijde een grijs scherm met enkele opties. Hier kunt u de uitlijning➊ en grootte van de afbeelding instellen➋. Ook kunt u instellen wat er gebeurt als een gebruiker op de afbeelding klikt➌ (zoals naar een pagina gaan of de foto in het groot weergeven). Wanneer alle opties goed staan, drukt u op in pagina toevoegen. De afbeelding verschijnt dan in het contentblok.

Toevoegen van media: Als je op de bibliotheek op een foto klikt dan opent het volgende menu met aan de rechter zijde de link (URL) van het bestand.

Toevoegen van media: Kopieer een artikel door deze knop aan te klikken. Je hoeft dan alleen de tekst en foto’s te vervangen.

Toevoegen van media: Klik op ‘Media’ in de menubalk in de zwarte linkerkolom.

➊

➋➌


15



7: ENVIRA GALLERY

7.1: Gallery of album aanpassenWanneer u gebruikt maakt van een galerij of albums, kunt u deze in Envira Gallery vinden.

➊ Envira gallery: Alle galerijen die zijn toegevoegd aan Envira Gallery. Tevens kun je hier foto’s aan een bestaande galerij toevoegen. ➋ Add new: Hier kun je een nieuwe galerij toevoegen ➌ Albums: Wanneer u gebruik maakt van meerdere galerijen op een pagina, kan het zo zijn dat het kopje Albums ertussen staat. Hier staat een overzicht van alle albums. Ook kunnen hier galerijen toegevoegd worden aan een album.

1. Add new: Hier kan een nieuwe gallerij aangemaakt worden.2. Title: Dit is de titel van de huidige galerij. Wanneer er op deze titel wordt geklikt, opent de galerij. Zodra u met uw muis over de titel heen gaat, verschijnt er een bewerkings-menu. a. Bewerken: Zorgt ervoor dat de galerij zich opent. Dit maakt het mogelijk om foto’s toe te voegen of verwijderen, en om instellingen van die galerij aan te passen.

b. Snel bewerken: Deze optie geeft u de mogelijkheid om kleine aanpassingen door te voeren, zoals het aanpassen van de titel.c. Prullenbak: Wanneer u hierop klikt, kunt u de galerij naar de prullenbak verplaat-sen. De galerij is nu verwijderd en zal ook niet meer zichtbaar zijn op de website.d. Voorbeeld: Geeft u een de mogelijkheid om de galerij te bekijken.e. Kopieer: Dupliceert de galerij. Dit zorgt ervoor dat er

een galerij aangemaakt kan worden met dezelfde opties. Als u alleen de foto’s binnen deze galerij aanpast, zijn de instellingen van het duplicaat hetzelfde als het origineel. f. Nieuw concept: Kopieert de galerij op dezelfde manier als kopieer. Er wordt een nieuw concept aangemaakt die aangepast kan worden en daarnaa gedupliceerd.3. Shortcode: Dit is de code die in een pagina geplakt kan worden om de galerij zicht-baar te maken. Dit gebeurt in

de visuele bewerker. Wanneer er gebruik wordt gemaakt van albums, hoeven deze shortcodes niet geplaatst te worden. In plaats daarvan kan een galerij worden geplaatst in de kopje albums (zie Envira Gallery - Albums).4. Number of images: Aantal afbeelding in die galerij5. Last modified: De datum wanneer een galerij voor het laatst is aangepast.6. Date: Datum van aanma-ken van de galerij.

Toevoegen van media: Klik op ‘Media’ in de menubalk in de zwarte linker kolom

➌

➋

➊

➊

❷ ❸ ❹ ➎ ➏


16


smartphone

7: ENVIRA GALLERY

7.2: Galerij aanpassenAls u een bestaande galerij opent, kunt u nieuwe foto’s toevoegen aan de galerij of juist veranderen.

1. Titel: Dit is de titel van de galerij. Dit is ook de titel die bij de galerij komt te staan.2. Envira Gallery settings: Onder elk van deze tabjes staat een aantal opties voor het instellen van de galerij. Aange-zien dit een bestaande galerij is,

raden wij het niet aan om deze instellingen aan te passen. 3. Afbeeldingen toevoegen: a. Hier kan er gekozen wor-den om afbeeldingen vanaf de computer naartoe te slepen. b. Een andere optie is om via de knop bestanden

selecteren, foto’s uit de bibliotheek te uploaden en/of uploaden van de computer.4. Huidige foto’s: Dit zijn de foto’s die nu in de galerij staan.a. De foto’s kunnen worden verwijderd door op het rode kruisje te drukken in de linker bovenhoek van iedere foto.

b. De volgorde van de foto’s kan worden aangepast door met de muis over de afbeel-dingen te verslepen. Huid de muis ingedrukt als u over de afbeelding heen gaat en sleep de afbeelding eenvoudig op de goede plek.

7.3: Een nieuwe galerij toevoegen Als u een nieuwe galerij wil toevoegen, gaat u naar Envira Gallery en dan naar Add new. Vanaf hier opent een scherm waar alle foto’s toegevoegd kunnen wor-den. Als u een zelfde galerij wil hebben als de bestaan-de galerijen, kunt u beter een galerij kopiëren. Een galerij kopieëren en plaatsen in een nieuw artikel kan met de knop ➎ (zie foto van het vorige stukje)

➎

➊

❷

➌

➍


17



website

7: ENVIRA GALLERY

7.4: Nieuw Envira Album aanmakenAls u gebruik maakt van albums, kunt u hier nieuwe albums aanmaken en bestaande albums aanpassen.

1. Add new: Hier kan een nieuw album aangemaakt worden.2. Title: Dit is de titel van het huidige album. Wanneer er op deze titel wordt geklikt, opent Het album. Zodra u met uw muis over de titel heen gaat, verschijnt er een bewerkingsmenu. a. Bewerken: Zorgt ervoor dat het album zich opent. Dit maakt het mogelijk om foto’s toe te voegen of verwijderen, en om instellingen van dat album aan te passen.

b. Snel bewerken: Deze optie geeft u de mogelijkheid om kleine aanpassingen door te voeren, zoals het aanpassen van de titel.c. Prullenbak: Wanneer u hierop klikt, kunt u het album naar de prullenbak verplaat-sen. Het album is nu verwij-derd en zal ook niet meer zichtbaar zijn op de website.d. Bekijken: Geeft u een de mogelijkheid om het album te bekijken.e. Kopieer: Dupliceert het album. Dit zorgt ervoor dat er

een album aangemaakt kan worden met dezelfde opties. Als u alleen de foto’s binnen dit album aanpast, zijn de instellingen van het duplicaat hetzelfde als het origineel. f. Nieuw concept: Kopieert het album op dezelfde manier als kopieer. Er wordt een nieuw concept aangemaakt die aangepast kan worden en daarnaa gedupliceerd.3. Shortcode: Dit is de code die in een pagina geplakt kan worden om het album zicht-

baar te maken. Dit gebeurt in de visuele bewerker.4. Number of Galleries: Aantal gallerijen in dit album.5. Last modified: De datum wanneer een album voor het laatst is aangepast.6. Date: Datum van aanmaken van het album.


18

Iedereen is mobiel

7: ENVIRA GALLERY

7.5: Toevoegen van een galerij aan een albumAls u gebruik maakt van albums, kunt u hier nieuwe albums aanmaken en bestaande albums aanpassen.

8: TABLEPRESS

8.1: Tabellen aanpassen in menu TablepressWanneer u gebruik maakt van tabellen, kunt u deze aanpassen in het menu onder het kopje TablePress.

➊ Alle tabellen Hier staat overzicht van alle bestaan-de tabellen. Vanaf hier kunnen de bestaande tabellen aangepast en verwijderd worden.➋ Tabel toevoegen Vanaf hier kunnen nieuwe tabellen toegevoegd worden.➌ Tabel importeren Vanaf hier kunnen .CSV, .XLS en .XLSX bestanden ingeladen worden.

1. Nieuwe galerij aanmakenMaak een nieuwe galerij aan in Add New ➊ of kopieer ➋ een bestaande galerij in het kopje Envira Gallery

2. Album aanmakenGa in het menu naar Envira Gallery - Albums a. Bestaat er al een album? Ga dan door naar stap 3

3. Galerij toevoegen aan het album Open het betreffende album. Als het goed is staat de galerij die aan het album toegevoegd moet worden op de onderste rij. Sleep de galerij naar de bovenste balk. Druk aan de recht kant op bijwerken om de wijzigingen op te slaan.

ControlerenAls alles goed is gegaan, staat de galerij in het album.

b. Bestaat er nog geen album? Maak dan nieuw album aan in Add New of kopieer een bestaand album in het kopje Envira Gallery. Zodra het album is aange-maakt, moet de shortcode van de galerij toegevoegd worden aan de pagina (zie hoofdstuk 7.4: Nieuw Envira Albums aanmaken op de vorige pagina bij ➌).

➊

➋

➌

➌

➊

➋

Tablepress: Het aanpassen van tabellen als u die heeft kan met de Tablepress die u kunt vinden in het menu aan de linkerkant.


19



8: TABLEPRESS

8.2: Tabellen aanpassen of uitbreidenWanneer u naar naar Tablespress gaat en dan op Alle tabellen klikt, krijgt u onderstaand scherm te zien.

8.3: Tabel toevoegenAls u een nieuwe tabel wil toevoegen, gaat u naar TablePress en dan naar Tabel toevoegen. Vanaf hier opent een scherm waar u een nieuwe tabel kunt toe-voegen. Als u een tabel wil hebben met dezelfde opmaak als een bestaande tabel, kunt u beter een ta-bel kopiëren. Om tabellen in dezelfde stijl te kopieren en elders te gebruiken kijk je naar hoofdstuk op deze pagina, punt 2 C.

1. Navigatie: Hier kun u navigeren tussen de verschil-lende pagina’s, net als in de menubalk2. Title: Dit is de titel van de huidige tabel. Wanneer er op deze titel wordt geklikt, opent de tabel. Zodra u met uw muis over de titel heen gaat, verschijnt er een bewerkings-menu. a. Bewerken: Zorgt ervoor dat de tabel zich opent. Dit

maakt het mogelijk om foto’s toe te voegen of verwijderen, en om instellingen van de tabel aan te passen.b. Toon shortcode: Deze optie laat de shortcode zien die in een pagina kan wroden geplaatst. Wanneer u zo’n shortcode plaatst, verschijnt de tabel op de pagina. Wel moeten shortcodes altijd in tekstuele modus worden toegevoegd.

c. Kopieer: Dupliceert de tabel. Dit zorgt ervoor dat er een tabel aangemaakt kan worden met dezelfde opties. d. Prullenbak: Wanneer u hierop klikt, kunt u het tabel naar de prullenbak verplaat-sen. De tabel is nu verwijderd en zal ook niet meer zichtbaar zijn op de website.e. Voorbeeld: Geeft u een de mogelijkheid om de tabel te bekijken.

3. Beschrijving: Dit is een beschrijving van de tabel. Zo staat er wat voor soort bestand het is als de tabel is ingeladen4. Laatst gewijzigd: Toont de datum waarom de tabel voor het laatst is aangepast

➊

➋ ➌ ➍


20

8: TABLEPRESS

8.4: Excel tabel ImporterenAls u ergens al een .CSV, .XLS of .XLSX (Excel) bestand heeft die u wil uploaden, kan dat via importeer tabel.

9: FOODPRESS

9.1: Een menukaart aanpassen of uitbreidenWanneer u gebruikt maakt van een menukaart, wordt dit gedaan in Menu Items. Deze is in de menubalk terug te vinden onder dezelfde naam.

➊ All Menu Items: Alle menu items die zijn toege-voegd aan Foodpress, kunt u hier vinden. Deze items kunt u vanaf hier aanpassen of verwijderen.

➋ Add New: Hier kunnen nieuwe menu items worden toegevoegd.

1. Importeer bronbestand: Hier wordt de keuze gemaakt waar vandaan het bestand geüpload wordt.a. Bestand uploaden: Uploa-den vanaf de computer.b. URL: Bestand uploaden vanaf het internet.

c. Bestand vanaf server: Het bestand uploaden vanaf de server.d. Handmatig invoeren: Zelf de tabel schrijven.2. Import format: Hier voert u in wat voor soort bestand het is.

3. Toevoegen, vervangen of aanvullen: Hier kiest u wat er met de tabel gedaan moet worden.

Foodpress: een menukaart wordt aangepast in ‘Menu Items’, dit kun je vinden in de menubalk aan de linker zijde van het scherm.

➋

➊


smartphone


21

9: FOODPRESS

9.2: Menu Item toevoegenAls u een nieuwe menu item wil toevoegen, gaat u naar Menu Items en dan naar Add new. Vanaf hier opent een scherm waar u een nieuw menu item kunt toevoegen. Als u een menu item wil hebben in dezelfde categorie (zoals lunch of dranken), kunt u beter een bestaand item uit die categorie kopiëren en aanpassen. Zo weet u zeker dat het item op de goede plek terecht komt. Het enige wat u nog moet aanpas-sen zijn de naam, beschrijving en prijs.

1. Add new: Hier kunt u een nieuwe titel toevoegen2. Title: Dit is de titel het menu item. Wanneer er op deze titel wordt geklikt, opent het item. Zodra u met uw muis over de titel heen

Foodpress: bij het venster ‘All menu items’ kan de kaart worden aangepast.



website

gaat, verschijnt er een bewerkingsmenu. a. Bewerken: Zorgt ervoor dat het item zich opent. Dit maakt het mogelijk om foto’s toe te voegen of verwij-

deren, en om instellingen van dat item aan te passen.b. Snel bewerken: Deze optie geeft u de mogelijkheid om kleine aanpassingen door te voeren, zoals het aanpassen van de titel.

c. Trash: Wanneer u hierop klikt, kunt u het item naar de prullenbak verplaatsen. Het item is nu verwijderd en zal ook niet meer zichtbaar zijn op de website.d. View: Geeft u een de mogelijkheid om het item te bekijken.e. Duplicate: Dupliceert het item. Dit zorgt ervoor dat er een item aangemaakt kan worden met dezelfde opties. Als u alleen de foto’s binnen dit item aanpast, zijn de instellingen van het duplicaat hetzelfde als het origineel. 3. Meal type: Dit is de categorie waar een menu in zit.


22

9: FOODPRESS

9.3: Content aanpassen in menu itemAls u een bestaand item opent, kunt u de content hiervan aanpassen.

10: KIWI (LOGO) SLIDER

10:1 Logo slider bewerkenWanneer u gebruik maakt van een logo slider, kunt u deze in de menubalk vinden onder het kopje Logo’s.

➊ Logo’s: Hier staat een overzicht van alle logo’s. Een logo kan in meerdere carrousels (sliders) zitten. ➋ Nieuw logo: Hier kunt u een nieuw logo toevoegen

1. Titel: De titel van het menu item2. Description: Beschrijving die onder het menu item terecht komt3. Price: De prijs van het product4. Meal type: De categorie waar het item in zit. Dit kan bijvoorbeeld ontbijt of visgerechten zijn.

Foodpress: zo ziet het er op de website uit.

➋

➊

Iedereen is mobiel


23


10.2: Hoofdmenu Kiwi (logo) Slider Wanneer u in de menubalk naar logo’s gaat en dan naar het kopje logo’s, krijgt u een overzicht te zien van alle logo’s die al zijn toegevoegd.

10.3: Nieuw logo toevoegenAls u een nieuwe menu item wil toevoegen, gaat u naar logo’s en dan naar Nieuw logo. Vanaf hier opent een scherm waar u een nieuw logo kunt toevoegen. Als u een logo item wil hebben in dezelfde carrousel (slider), kunt u beter een bestaand item uit die car-rousel kopiëren en aanpassen. Zo weet u zeker dat het item op de goede plek terecht komt. Het enige wat u nog moet aanpassen zijn de naam, link en foto

1. Nieuw logo: Hier kunt u een nieuw menu item toevoegen2. Title: Dit is de titel het menu item. Wanneer er op deze titel wordt geklikt, opent het item. Zodra u met uw muis over de titel heen gaat, verschijnt er een bewerkings-menu. a. Bewerken: Zorgt ervoor dat het menu item zich opent. Dit maakt het mogelijk om de titel te veranderen, link te

veranderen en afbeelding aan te passenb. Snel bewerken: Deze optie geeft u de mogelijkheid om kleine aanpassingen door te voeren, zoals het aanpassen van de titel.c. Prullenbak: Wanneer u hierop klikt, kunt u het menu item naar de prullenbak verplaatsen. Het menu item is nu verwijderd en zal ook niet meer zichtbaar zijn op de website.

d. Voorbeeld: Geeft u een de mogelijkheid om het menu item te bekijken.e. Kopieer: Dupliceert het menu item. Dit zorgt ervoor dat er een galerij aangemaakt kan worden met dezelfde opties. Als u alleen de foto’s binnen deze galerij aanpast, zijn de instellingen van het duplicaat hetzelfde als het origineel. f. Nieuw concept: Kopieert het menu item op dezelfde

manier als kopieer. Er wordt een nieuw concept aange-maakt die aangepast kan wor-den en daarnaa gedupliceerd.3. Datum: De datum van publiceren van het logo4. URL: De link waar de afbeelding naartoe linkt5. Logo voorbeeld: Een voorbeeld van de afbeelding van het logo



➊

➋ ❸ ❹ ➎


24


10.4: Logo’s aanpassenAls u een bestaand logo opent, kunt u de content hiervan aanpassen.

11: META SLIDER

Wanneer u gebruik maakt van een slider, kunt u deze in de menubalk vinden onder het kopje metaslider

1. Nieuw logo: Hier kunt u een nieuw menu item toevoegen2. Title: Dit is de titel het menu item. Deze kan, afhanke-lijk van de instellingen, boven het item zichtbaar worden.3. Logo: Dit is waar het logo geüpload moet worden4. URL: De link waar de afbeelding naartoe linkt5. Carrousel: Hier kunt u aangeven in welke carrousel het logo zichtbaar moet zijn

1. Slider kiezen of een nieuwe slider maken: Bovenin kunt u de slider selecteren die u wil aanpassen. Als u een nieuwe slider wil aanmaken, hoeft u enkel op “+” te drukken.2. Slide toevoegen: Een slide toevoegen aan de slider die nu actief is3. Enkele slide: Een preview van de slider. Om de afbeel-ding te verplaatsen, hoeft u enkel met uw muis over de af-beelding te gaan en te slepen.

4. Onderschrift: Een onder-schrift bij een foto. Deze kan eventueel onder de slide zelf verschijnen.5. URL: De link waar de slide naartoe moet verwijzen. Laat leeg als de slide nergens naar-toe moet linken 6. Instellingen: Hier staan alle instellingen om de huidige slide aan te passen7. Shortcode: De shortcode die geplaatst kan worden om de slider te plaatsen


smartphone

➊

➊

❷

❷

❸

❹

❹

➎

➎➏

➐


25

12: REVOLUTION SLIDER

Wanneer u gebruik maakt van een uitgebreide slider, kunt u deze in de menubalk vinden onder het kopje Revolution Slider.

12.1: Overzicht menu Revolution SlidersWanneer u in de menubalk op Revolution slider klikt, opent zich onderstaand scherm.

1. Titel: Dit is naam van de slider. Wanneer u op de titel klikt, openen de instellingen van de slider (zie settings)2. Shortcode: Dit is de shortcode om de slider weer te geven op een pagina

3. Source: Wat voor soort project het is4. N. Slider: Het aantal slides5. Actionsa. Settings: De instellingen van de sliderb. Edit Slides: Hier kunt u de slides van deze slider aanpassen

c. Export Slider: Vanaf hier kunt u de slider exporterend. Vuilnisbak: Wanneer u hier op klikt, verwijdert u de gehele slidere. Stapel foto’s: Wanneer u op de gele knop drukt, dupli-ceert u de slider

f. Vergrootglas: Zo kunt u een preview krijgen van de slider6. Import Slider: Vanaf hier kunt u sliders importeren



website

➊ ➋ ❸ ❹ ➎

➏


26

12: REVOLUTION SLIDER

12.2: Revolution slider settings aanpassenWanneer u gebruik maakt van een uitgebreide slide, kunt u deze in de menubalk vinden onder het kopje Revolution Slider

Revolution slider is een van de uitgebreidere sliders. Wij raden het aan om hier geen aanpassingen te doen, tenzij u zeker bent van wat u doet.

1. Preview: Hier ziet u een preview van uw slider2. Opslaan en preview: De groende knop zorgt ervoor dat de wijzigingen doorgevoerd worden. Met het vergrootglas kunt u een goede preview krijgen van de slider.3. Layer opties: Hier kunt u

layer kopiëren of een bepaald soort layer toevoegen4. Layer General Parameters: Hier kunt u de opties aanpassen van de geselecteerde layer5. Layers Timing & Sorting: Hier selecteert u en bepaalt u de volgorde en timing van de layer.

Iedereen is mobiel

➋

❸

❹ ➎

Download handleiding mobiele website maken

Documents

Transcript of Download handleiding mobiele website maken