Iedereen is mobiel
Google zet mobielvriendelijke websites hoger
Handleiding voor uw website Vele malen gebruiksvriendelijker
De perfecte website voor alle apparaten
✓ Perfect zichtbaar op
alle mobiele apparaten
✓ Makkelijk zelf te
beheren CMS systeem
✓ Professioneel design
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
1
Uw website perfect zichtbaar op alle mobiele apparaten
INHOUDSOPGAVE 1: Introductie 1.1: Inloggen op uw website 1.2: Menubalk 1.3: Belangrijke punten 1.4: Wat kunt u zelf aanpassen?
3 3 3 4
2: Berichten 2.1: Nieuw bericht toevoegen aan uw website 2.2: Afbeeldingen toevoegen aan uwwebsite 2.3: Categorie kiezen bij een artikel 2.4: Uitgelichte afbeelding kiezen voor een artikel 2.5: Reacties van bezoekers bewerken
5 5 6 6 6
3: Pagina’s 3.1: Pagina aanpassen 3.2: Bewerkingsmenu gebruiken 3.3: Tekst nooit van websites of Word kopiëren 3.4: Teksten veilig uit Word halen 3.5: Ontwerpopties binnen het bewerkingsmenu 3.6: Enkele afbeelding aanpassen in het bewerkingsmenu
10
4: Navigatie menu 4.1: Toevoegen van menu items 4.2: De opbouw van de menu structuur 4.3: Titel aanpassen van menu 4.4: Pagina aan menu toevoegen
11 11 12 12
5: Toevoegen van tekstblokken 5.1: Tekstblokken dupliceren
12
7 7 8 8 9
6: Toevoegen van media 6.1: Toevoegen van afbeeldingen / video / PDF’s / muziek aan de Media map 13 6.2: Toevoegen van afbeeldingen / video / PDF’s / muziek op een bericht of pagina 13 7: Widget: Envira Gallery 7.1: Gallery of album aanpassen 7.2: Galerij aanpassen 7.3: Een nieuwe galerij toevoegen 7.4: Nieuw Envira Album aanmaken 7.5: Toevoegen van een galerij aan een album 8: Widget: Tablepress 8.1: Tabellen aanpassen in menu Tablepress 8.2: Tabellen aanpassen of uitbreiden 8.3: Tabel toevoegen 8.4: Excel tabel Importeren
14 15 15 16 17 17 18 18 19
9: Widget: Foodpress 9.1: Een menukaart aanpassen of uitbreiden 19 9.2: Menu Item toevoegen 20 9.3: Content aanpassen in menu item 21 10: Widget: Kiwi (logo) slider 10:1: Logo slider bewerken 10.2: Hoofdmenu Kiwi (logo) Slider 10.3: Nieuw logo toevoegen 10.4: Logo’s aanpassen
21 22 22 23
11: Widget: Meta slider
23
12: Widget: Revolution slider 12.1: Overzicht menu Revolution Sliders 12.2: Revolution slider settings aanpassen
24 25
2
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
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.
Inloggen: inlogscherm
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.
Menubalk: donkere menubalk
Visuele en tekstuele bewerker. Bij het aanpassen 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. 3
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
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
Teksten aanpassen
X
Teksten toevoegen
X
Tekstblokken toevoegen
X
Lettertype aanpassen Inline tekstkleur aanpassen
X
Afbeeldingen aanpassen
X
Afbeeldingen aan Wordpress toevoegen
X
Pagina’s aanmaken
X
Berichten aanpassen
X
Berichten aanmaken
X
Widgets aanpassen Reacties bekijken en goedkeuren
Alleen Bureau feith
X
X
X
Achtergrondkleur X Rijen aanpassen (aantal rijen) Revisies terugzetten
X
Portfolio items aanmaken
X
X
Portfolio instellingen
X
Marges aanpassen
X
Structuur van de site aanpassen
X
Tabellen aanpassen
X
Tabellen toevoegen
X
Items voor een voedselmenu toevoegen
X
Logo’s aan slider toevoegen
X
Header slider aanpassen Foto’s aan galerij toevoegen
X
X
Galerijen toevoegen
X
Albums aanmaken
X
4
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
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 website
Wanneer 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 teksten en afbeeldingen.
Berichten: menu berichten
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.
Berichten: menu bericht bewerken
2.2: Afbeeldingen toevoegen aan website
Het 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.
5
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Uw website perfect zichtbaar op alle mobiele apparaten
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
Berichten: Menu categorieën
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. Berichten: Uitgelichte afbeelding
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 nieuwsberichten, 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.
Berichten: Menu reacties
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 bewerkingsmenu. Daar kunt u een keuze maken tussen de verschillende opties.
6
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Van alle Nederlanders heeft 71 % een smartphone
3: PAGINA’S 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 menubalk). Door op de titel van de pagina te klikken, kunt u deze pagina bewerken.
Pagina’s: overzicht met alle pagina’s.
3.1: Pagina aanpassen
Zodra de pagina zich opent, ziet u boven aan de pagina de titel van de pagina en twee blauwe knoppen. Om de pagina aan te passen, moet er op de knop frontend editor worden geklikt.
Pagina’s: menu pagina’s, blauwe knoppen.
De website opent zich nu in bewerkingsmodus. Vanaf hier kunnen de teksten en afbeeldingen op de pagina aangepast worden. Wanneer de aanpassingen zijn doorgevoerd, hoeft u enkel rechtsboven op bijwerken te klikken, om de veranderingen op te slaan. Rechtstreeks kopiëren uit Word is niet mogelijk. Tekst uit Word heeft opmaak regels die de layout van de website overschrijft. Hierdoor komen teksten er anders uit te zien dan de huidige teksten op de site. Bekijk het hoofdstuk 3.3: Tekst nooit van websites of Word kopiëren, voor een uitgebreide uitleg over het toevoegen van teksten.
3.2: Bewerkingsmenu gebruiken
Om een element aan te passen, moet je met je muis over een element heen gaan. Dan verschijnt onderstaand elementmenu over het element heen. Ieder element heeft een andere functie.
Pagina’s: menu pagina’s
Pagina’s: Elementmenu
➊ Pagina’s: Knop ‘Verslepen’
➋ Pagina’s: Knop ‘Bewerken’
1: Door de muis ingedrukt te houden op de vier pijltjes, kan het blok verplaatst worden. 2: Wanneer er op het potloodje wordt gedrukt, opent het bewerkingsmenu van het betreffende item. Kijk bij Aanpassen van tekst of Aanpassen van afbeeldingen voor de specifieke bewerkingsmenu’s van ieder item.
➌ Pagina’s: Knop ‘Dupliceren’
3: Door op de knop met de twee pagina’s te drukken, wordt het betreffende element gedupliceerd.
➍ Pagina’s: Knop ‘Verwijderen’
4: Om het element te verwijderen, moet er op de prullenbak worden gedrukt.
7
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Een mobiele website heeft een andere gebruikerservaring dan een ‘normale’ website
3: PAGINA’S Nadat er in het bewerkingsmenu (foto rechts) midden op de pagina op bewerken is geklikt, opent het bewerkingsmenu ‘tekst blok settings’. Vanaf hier kunnen de teksten aangepast worden.
Pagina’s: Bewerkingsmenu
3.3: 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.4: 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.
Pagina’s: tekst blok settings.
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.
8
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Iedereen is mobiel
3: PAGINA’S 3.5: Ontwerpopties binnen het bewerkingsmenu
Hieronder staan alle ontwerpopties binnen het bewerkingsmenu. 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 tekstblok 2. Bold: Zorgt ervoor dat de geselecteerde tekst wordt dikgedrukt 3. Italic: Zorgt ervoor dat de geselecteerde tekst wordt schijngedrukt 4. Doorgehaald: Zorgt ervoor dat de geselecteerde tekst wordt doorgehaald 5. Ongeordende opsomming: Zorgt ervoor dat de geselecteerde tekst wordt opgesomd door middel van bulletpoints 6. Geordende opsomming: Zorgt ervoor dat de geselecteerde tekst wordt opgesomd door middel van cijfers 7. Blockquote: Zorgt ervoor dat de tekst een blockquote wordt.
8. Horizontale lijn: Voegt een horizontale lijn toe op de geselecteerde plek 9. Links uitlijnen: Lijnt de geselecteerde tekst links uit 10. Gecentreerd uitlijnen: Lijnt de geselecteerde tekst in het midden uit 11. Rechts uitlijnen: Lijnt de geselecteerde tekst rechts uit 12. Link toevoegen / bewerken: a. Wanneer er niets is geselecteerd, kan er een nieuwe link worden aangemaakt b. Wanneer er een tekst is geselecteerd, kan de tekst in de link wordt veranderd c. Wanneer een link is aangepast, kan de link worden aangepast 13. 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 geven 15. Werkbalk weergeven / verbergen 16. Visuele modus: Het schem omzetten in visuele modus. Dit is de modus waar dit scherm nu in staat 17. 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 verschillende soorten headers.
19. Onderstrepen: Zorgt ervoor dat de geselecteerde tekst wordt onderstreept 20. Uitvullen: Zorgt ervoor dat de tekst de volledige ruimte gebruikt 21. Tekstkleur: Zodra een tekst is geselecteerd, kan de tekstkleur aangepast worden 22. Plakken als tekst: Plakt tekst 23. Opmaak verwijderen: Verwijdert de opmaak 24. Speciale karakters: Laat een lijst met speciale karakters zien 25. Inspringen verkleinen: Springs in naar links 26. Inspringen vergroten: Springs in naar rechts
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
9
Uw website perfect zichtbaar op alle mobiele apparaten
3: PAGINA’S 3.6: Enkele afbeelding aanpassen in het bewerkingsmenu
Hieronder staan alle ontwerpopties binnen het bewerkingsmenu van een enkele afbeelding. 1. Widget titel: De titel van de afbeelding. Deze titel komt boven de afbeelding te staan 2. Afbeelding: Hier kies je de afbeelding. 3. Afbeeldingsformaat: Hier geef je het formaat van de afbeelding aan. De volgende opties zijn mogelijk: a. Thumbnail b. Medium c. large d. full e. Specifiek aantal pixels, zoals 200x100 (200 pixels breed, 100 pixels hoog) 4. Afbeelding uitlijning a. Left: Links uitlijnen b. Right: rechts uitlijnen c. Center: Midden uitlijnen 5. Image style: Hier kun je een effect meegeven aan de afbeelding, zoals ronde hoeken, schaduw of een rand 6. Link naar grote afbeelding: Wanneer aangevinkt, linkt de afbeelding naar de grote versie van zichzelf 7. Afbeeldingslink: Wanneer een gebruiker op de afbeelding klikt, wordt deze naar de link doorgestuurd die hier in ingevuld. 8. CSS animatie: Hier kun je een animatie meegeven aan de afbeelding
Pagina’s: ontwerpopties van het bewerkingsmenu van een enkele afbeelding.
10
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Van alle Nederlanders heeft 71 % een smartphone
4: NAVIGATIE MENU 4.1: Toevoegen van menu items
Het toevoegen en verwijderen van items in het navigatie menu kan via weergave en dan menu’s.
Navigatie menu: ga naar ‘Weergave’ in de zwarte balk links in het scherm
Navigatie menu: in de linker kolom staat het navigatie menu
en kies ‘Menu’s’
pagina’s hierover leest u op de volgende pagina. De rechter kolom
om menu items te
geeft de structuur weer. Het balkje dat inspringt (
wijzigen.
submenu zoals te zien is in de menubalk onderaan deze pagina.
4.2: De opbouw van de menu structuur
Hieronder 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.
) is een
➊ ➊ ➊ ➊ ➋ ➊ 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.
11
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Een mobiele website heeft een andere gebruikerservaring dan een ‘normale’ website
4: NAVIGATIE MENU 4.3: Titel aanpassen van menu
Om 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 navigatielabel kan de tekst dan aangepast worden.
4.4: Pagina aan menu toevoegen
Navigatie menu pagina’s
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 gesleept (zoals op de vorige pagina omschreven).
Navigatie menu: klik op het pijltje naast ‘pagina’ omlaag en verander de titel van de titel in het uitgeklapte venster.
5: TOEVOEGEN VAN TEKSTBLOKKEN 5.1: Tekstblokken dupliceren
Een 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.
Navigatie menu: Kopieer een artikel door deze knop aan te klikken. Je hoeft dan alleen de tekst en foto’s te vervangen.
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.
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
12
Iedereen is mobiel
6: TOEVOEGEN VAN MEDIA 6.1: Toevoegen van afbeeldingen / video / PDF’s / muziek aan de Media map
Toevoegen van media: Klik op ‘Media’ in de
Het 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 bewerkingsmenu’ als je wilt weten hoe je een link toevoegd.
menubalk in de zwarte linkerkolom.
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.
6.2: Toevoegen van afbeeldingen / video / PDF’s / muziek op een bericht of pagina Als 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 afbeelding 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: Kopieer een artikel door deze knop aan te klikken. Je hoeft dan alleen de tekst en foto’s te vervangen.
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
13
Uw website perfect zichtbaar op alle mobiele apparaten
7: ENVIRA GALLERY 7.1: Gallery of album aanpassen
Wanneer 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.
➊ ➋ ➌ Toevoegen van media: Klik op ‘Media’ in de menubalk in de zwarte linker kolom
➊
❷
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 bewerkingsmenu. 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 verplaatsen. 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 zichtbaar 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 galerij 5. Last modified: De datum wanneer een galerij voor het laatst is aangepast. 6. Date: Datum van aanmaken van de galerij.
14
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Van alle Nederlanders heeft 71 % een smartphone
7: ENVIRA GALLERY 7.2: Galerij aanpassen
Als 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. Aangezien dit een bestaande galerij is,
raden wij het niet aan om deze instellingen aan te passen. 3. Afbeeldingen toevoegen: a. Hier kan er gekozen worden 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 afbeeldingen 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 worden. Als u een zelfde galerij wil hebben als de bestaande 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)
15
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Een mobiele website heeft een andere gebruikerservaring dan een ‘normale’ website
7: ENVIRA GALLERY 7.4: Nieuw Envira Album aanmaken
Als 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 verplaatsen. Het album is nu verwijderd 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.
16
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Iedereen is mobiel
7: ENVIRA GALLERY 7.5: Toevoegen van een galerij aan een album
Als u gebruik maakt van albums, kunt u hier nieuwe albums aanmaken en bestaande albums aanpassen.
➊ ➋ 1. Nieuwe galerij aanmaken Maak een nieuwe galerij aan in Add New ➊ of kopieer ➋ een bestaande galerij in het kopje Envira Gallery 2. Album aanmaken Ga in het menu naar Envira Gallery - Albums a. Bestaat er al een album? Ga dan door naar stap 3
➌ 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 aangemaakt, moet de shortcode van de galerij toegevoegd worden aan de pagina (zie hoofdstuk 7.4: Nieuw Envira Albums aanmaken op de vorige pagina bij ➌).
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.
Controleren Als alles goed is gegaan, staat de galerij in het album.
8: TABLEPRESS 8.1: Tabellen aanpassen in menu Tablepress
Wanneer u gebruik maakt van tabellen, kunt u deze aanpassen in het menu onder het kopje TablePress. ➊ Alle tabellen Hier staat overzicht van alle bestaande 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.
➊ ➋ ➌ Tablepress: Het aanpassen van tabellen als u die heeft kan met de Tablepress die u kunt vinden in het menu aan de linkerkant.
17
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Uw website perfect zichtbaar op alle mobiele apparaten
8: TABLEPRESS 8.2: Tabellen aanpassen of uitbreiden
Wanneer u naar naar Tablespress gaat en dan op Alle tabellen klikt, krijgt u onderstaand scherm te zien. ➊
➋
1. Navigatie: Hier kun u navigeren tussen de verschillende pagina’s, net als in de menubalk 2. 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 bewerkingsmenu. 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 verplaatsen. 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 ingeladen 4. Laatst gewijzigd: Toont de datum waarom de tabel voor het laatst is aangepast
8.3: Tabel toevoegen
Als 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 toevoegen. Als u een tabel wil hebben met dezelfde opmaak als een bestaande tabel, kunt u beter een tabel kopiëren. Om tabellen in dezelfde stijl te kopieren en elders te gebruiken kijk je naar hoofdstuk op deze pagina, punt 2 C.
18
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Van alle Nederlanders heeft 71 % een smartphone
8: TABLEPRESS 8.4: Excel tabel Importeren
Als u ergens al een .CSV, .XLS of .XLSX (Excel) bestand heeft die u wil uploaden, kan dat via importeer tabel.
1. Importeer bronbestand: Hier wordt de keuze gemaakt waar vandaan het bestand geüpload wordt. a. Bestand uploaden: Uploaden 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.
9: FOODPRESS 9.1: Een menukaart aanpassen of uitbreiden Wanneer 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-
➊ ➋ Foodpress: een menukaart wordt aangepast in ‘Menu Items’, dit kun je vinden in de menubalk aan de linker zijde van het scherm.
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.
19
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Een mobiele website heeft een andere gebruikerservaring dan een ‘normale’ website
9: FOODPRESS 9.2: Menu Item toevoegen
Als 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 aanpassen zijn de naam, beschrijving en prijs.
Foodpress: bij het venster ‘All menu items’ kan de kaart worden aangepast.
1. Add new: Hier kunt u een nieuwe titel toevoegen 2. 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 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.
20
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Iedereen is mobiel
9: FOODPRESS 9.3: Content aanpassen in menu item
Als u een bestaand item opent, kunt u de content hiervan aanpassen.
Foodpress: zo ziet het er op de website uit.
1. Titel: De titel van het menu item 2. Description: Beschrijving die onder het menu item terecht komt 3. Price: De prijs van het product 4. Meal type: De categorie waar het item in zit. Dit kan bijvoorbeeld ontbijt of visgerechten zijn.
10: KIWI (LOGO) SLIDER 10:1 Logo slider bewerken
Wanneer 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
21
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Uw website perfect zichtbaar op alle mobiele apparaten
10: KIWI (LOGO) SLIDER 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.
➊
➋
1. Nieuw logo: Hier kunt u een nieuw menu item toevoegen 2. 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 bewerkingsmenu. 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 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 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 aangemaakt die aangepast kan worden en daarnaa gedupliceerd. 3. Datum: De datum van publiceren van het logo 4. URL: De link waar de afbeelding naartoe linkt 5. Logo voorbeeld: Een voorbeeld van de afbeelding van het logo
10.3: Nieuw logo toevoegen
Als 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 carrousel 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
22
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Van alle Nederlanders heeft 71 % een smartphone
10: KIWI (LOGO) SLIDER 10.4: Logo’s aanpassen
Als u een bestaand logo opent, kunt u de content hiervan aanpassen.
➊ ❷
❸
❹
➎
1. Nieuw logo: Hier kunt u een nieuw menu item toevoegen 2. Title: Dit is de titel het menu item. Deze kan, afhankelijk van de instellingen, boven het item zichtbaar worden. 3. Logo: Dit is waar het logo geüpload moet worden 4. URL: De link waar de afbeelding naartoe linkt 5. Carrousel: Hier kunt u aangeven in welke carrousel het logo zichtbaar moet zijn
11: META SLIDER Wanneer u gebruik maakt van een slider, kunt u deze in de menubalk vinden onder het kopje metaslider
➊ ❷ ❹ ➎ ➏
➐
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 is 3. Enkele slide: Een preview van de slider. Om de afbeelding te verplaatsen, hoeft u enkel met uw muis over de afbeelding te gaan en te slepen.
4. Onderschrift: Een onderschrift 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 naartoe moet linken 6. Instellingen: Hier staan alle instellingen om de huidige slide aan te passen 7. Shortcode: De shortcode die geplaatst kan worden om de slider te plaatsen
23
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Een mobiele website heeft een andere gebruikerservaring dan een ‘normale’ website
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 Sliders
Wanneer 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 is 4. N. Slider: Het aantal slides 5. Actions a. Settings: De instellingen van de slider b. Edit Slides: Hier kunt u de slides van deze slider aanpassen
c. Export Slider: Vanaf hier kunt u de slider exporteren d. Vuilnisbak: Wanneer u hier op klikt, verwijdert u de gehele slider e. Stapel foto’s: Wanneer u op de gele knop drukt, dupliceert u de slider
f. Vergrootglas: Zo kunt u een preview krijgen van de slider 6. Import Slider: Vanaf hier kunt u sliders importeren
24
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam
Iedereen is mobiel
12: REVOLUTION SLIDER 12.2: Revolution slider settings aanpassen
Wanneer 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 slider 2. 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 toevoegen 4. Layer General Parameters: Hier kunt u de opties aanpassen van de geselecteerde layer 5. Layers Timing & Sorting: Hier selecteert u en bepaalt u de volgorde en timing van de layer.
25
[email protected] | www.bureaufeith.nl | 020 763 05 77 | Frederiksplein 1-5, 1017 XK Amsterdam