QUICK GUIDE INSTANT MAGAZINE

Transcriptie

1 QUICK GUIDE INSTANT MAGAZINE Creëer een online magazine in een handomdraai Leuk dat je aan de slag gaat met Instant Magazine! Met deze quick guide beleef je nog meer plezier aan het maken van je publicaties. Je ziet stap voor stap hoe je een magazine maakt en welke mogelijkheden je daarbij hebt. Heb je vragen die deze quick guide niet beantwoordt? Stel ze gerust aan een van onze collega s. De snelste manier is via Support > Create new ticket. Wat is het verschil tussen titles en issues? Binnen jouw account kun je meerdere titles aanmaken. Binnen één title kun je een onbeperkt aantal issues publiceren. Stel dat je een personeelsblad én een relatiemagazine maakt, dan zijn dit twee titles. Binnen een title maak je issues aan: de verschillende nummers van je magazine. Uitzondering: als je een one-off afneemt, kun je één issue aanmaken binnen de title. Hoe werkt het precies met titles en issues? In dit schema leggen we de structuur uit: Aan de title zijn je domeinnaam, Google Analytics-code, logo en magazine-archief gekoppeld. Als je een tweede issue binnen de title aanmaakt, staan al deze instellingen direct goed. Instant Magazine Quick Guide 1

2 Let s get started Log in op In het dashboard vind je de issues waar je recent aan hebt gewerkt en een overzicht van je titles. Instant Magazine Quick Guide 2

3 Aan de slag met je eerste magazine STAP 1: Je eerste magazine maken Klik op new title, geef m een naam en klik op start! Deze stap kun je overslaan als je een nieuw issue maakt binnen een bestaande title. Kies dan bij die title voor edit. Klink daarna op de + bij new issue. In het kader met Title settings vul je de volgende gegevens in: Title name: De naam van de title. Logo: dit logo staat in de navigatiebalk. Icon: dit verschijnt in de navigatiebalk in de mobiele weergave, als favicon in de browser én als app-icon op je mobiel/tablet als je het magazine toevoegt aan je beginscherm. De afbeelding moet vierkant zijn. Loader: het logo dat wordt getoond als het magazine wordt geladen. Heeft het logo een transparante achtergrond? Gebruik dan een png-bestand. Dat kan transparante gedeelten bevatten. In andere gevallen gebruik je een jpg-bestand. We adviseren je een breedte van 1024 pixels. Tip: als je bij Logo klikt op browse, kom je in de Image Library. Maak daar een map aan waar alle logo s in staan. Dat is wel zo overzichtelijk. Instant Magazine Quick Guide 3

4 Hostname Bij Hostname vul je de URL in waaronder je magazine moet verschijnen. Vul je hier niets in? Dan verschijnt jouw accountnaam als een subdomein van De URL wordt dan als volgt opgebouwd: Wil je dat je magazine te bereiken is op een eigen (sub)domein? Vul dan je eigen URL (hostname) in. Nadat je het magazine gepubliceerd hebt, wordt de URL dan als volgt opgebouwd: of (dus je accountnaam, onze URL en de title worden vervangen door je hostname). Google Analytics Wil je het bezoekgedrag van je magazine meten via Google Analytics? Vul dan in dit veld de UA-code in. Heb je geen Google-code? Activeer deze dan op STAP 2: Theme styling (de algemene vormgeving) Zodra je een title hebt en een issue hebt gemaakt, is de knop theme beschikbaar. Het theme bepaalt de algemene vormgeving van je issue. Je kunt bijvoorbeeld fonts en kleuren kiezen, die worden toegepast op alle pagina s van een issue. Instant Magazine Quick Guide 4

5 Om een nieuw theme te maken, klik je op de knop theme en dan op Create new theme. Je kunt nu zelf de kleuren van je thema bepalen: klik daarvoor op Choose your own colors. Maar om het je makkelijk te maken, is het ook mogelijk om kleuren en andere stijlelementen automatisch in te vullen. Je kunt er voor kiezen om een default preset te gebruiken, dit is een prefilled thema waarin alle kleuren en fonts al voor je gekozen zijn. Of het systeem kleuren laten kiezen die passen bij je website of logo. Of het gebruikt opnieuw de kleuren van een eerder issue. Als je dat wilt, maak dan een van de volgende keuzes: Apply default preset : een prefilled thema (kleuren en fonts), óf Website : vul de URL in van je website, óf Logo : upload je logo, óf Copy from existing issue : kies een bestaand magazine. In het volgende scherm (Your theme) bepaal je de volgende onderdelen van de vormgeving, dit scherm krijg je niet te zien als je hebt gekozen voor de default preset: Navigation bar : kies een van de navigatievormen. Hier kies je waar de navigatiebuttons gepositioneerd worden. Font (plain text) : het basislettertype voor gewone tekst. Background color (plain text) : de achtergrondkleur van gewone tekst. Font (titles): het lettertype voor koppen. Font (subtitles): het lettertype voor onderkoppen. Kleuren kiezen in de colorpicker In de colorpicker kun de je gewenste kleur aanklikken in een kleurenspectrum. Weet je al welke RGB-kleur of hexadecimale kleur je nodig hebt? Dan kun je ook de RGB -waarden of de hexadecimale kleurcode invullen. Wil je de transparantie van een kleur instellen? Dat regel je met de waarde in het vak A. Hier stel je het percentage in: 100 is volledig ondoorzichtig, 0 is volledig doorzichtig. Deze waarde kun je ook beïnvloeden met de schuifbalk. Met het icoon kun je een item transparant maken. Klik op Generate theme om het theme met de gekozen instellingen te maken. Per magazine blijven deze instellingen bewaard. Als je al een kleurenschema hebt en opnieuw kiest voor Create new theme, overschrijf je daarmee je bestaande instellingen. Instant Magazine Quick Guide 5

6 Stap 3: pagina s aanmaken Nu begint het leuk te worden: je kunt je eerste pagina gaan aanmaken! We hebben een groot aantal pagina templates ontwikkeld. Dit zijn vooraf gedefinieerde paginatypes die je naar eigen inzicht kunt invullen. We hebben deze standaarden gecreëerd zodat: je supersnel de pagina s kunt aanmaken; wij kunnen waarborgen dat ze op de verschillende apparaten goed werken; de lezer enige houvast krijgt in de navigatie. Je kunt per pagina een template kiezen. Om een pagina te maken, klik je op Add page. Geef je pagina een naam ( Page name ) en kies een template. Als je klikt op Choose template, krijg je alle beschikbare templates te zien. Voor elk type content hebben we templates ontwikkeld: covers, indexpagina s, fotogaleries, video s, agenda s, producten, enzovoort. Filter aan de hand van het type content (bijvoorbeeld long read ) of scrol door het overzicht. Klik op Use template om de template te selecteren of klik op Preview voor meer informatie over de template. Tip: Probeer vooraf een goed beeld te krijgen van de beschikbare templates. Bekijk alle templates op: Of ga naar Support > Template instruction om te bladeren door de Template Instructions. Instant Magazine Quick Guide 6

7 Tab Content: tekst en afbeeldingen invoeren Heb je een template gekozen? Dan zie je in het tabblad Content de velden die je moet invullen. In sommige templates zie je twee tekstvelden: één voor mobile en één voor desktop/tablet. Zo kun je voor bezoekers op een smartphone eventueel een kortere tekst presenteren. Tekst op de pagina Veel templates zijn geschikt om teksten op te knippen in korte content chunks met duidelijke koppen. Zo ontstaat een pagina met tekst die goed scanbaar is voor de lezer. Heb je een lange tekst? Ook daarvoor zijn een aantal fraaie templates beschikbaar. Bij de meeste templates vind je ook het maximale aantal woorden waar de template geschikt voor is. Maar dat is maar een indicatie. Tenslotte bepaal je zelf de lettergrootte. Controleer daarom de pagina s op alle resoluties. Zo weet je zeker dat je tekst op de pagina past, ook op een scherm in een lagere resolutie. Instant Magazine Quick Guide 7

8 Afbeeldingen Alle afbeeldingen staan in je eigen Image Library. Deze open je door op de knop Browse te klikken (overal waar je een afbeelding kunt uploaden). Tip: je kunt hier eenvoudig nieuwe mappen maken. Werk met een logische mappenstructuur om het overzichtelijk te houden. Voor achtergrondafbeeldingen adviseren we het volgende: Sla ze (in Photoshop) op voor het web als jpg-bestand. Omvang: 1400 x 900 pixels. De afbeelding schaalt op verschillende devices in de breedte mee. De hoogte van de afbeelding wordt op verschillende devices bijgesneden. Voor mobile kun je eventueel een staande variant maken van 640 x 960 pixels. Breng de kwaliteit terug naar 30-60% Probeer ervoor te zorgen dat een achtergrondfoto niet groter is dan 150 KB. Met te grote afbeeldingsbestanden wordt de laadtijd van het magazine langer. Wil je weten welk formaat we adviseren voor andere afbeeldingen? Bij het veld Image zie je het icoon. Klik daarop om de Suggested dimensions te zien. Dat zijn de maximale afmetingen in pixels. Tip: Heb je geen Photoshop? Probeer Pixlr: Dat is een gratis web-based tool om afbeeldingen te bewerken, te schalen enzovoort. Is alle content op de pagina gevuld? Klik op Save om de pagina op te slaan. Klik op Preview om je pagina te bekijken in een nieuw browserscherm. Ziet het er goed uit? Nu kun je eventueel in het theme de vormgeving nog aanpassen. Tabblad Page style: paginavormgeving aanpassen Klik op de tab Page style om op paginaniveau de vormgeving aan te passen. Hier zie je elementen van de template, zoals Title of Button. Kies je hier specifieke instellingen? Dan overschrijf je de algemene styling van het theme. Instellingen die je hier kiest, gelden alleen voor deze pagina. Tabblad Item style: items vormgeven In sommige templates vind je de tab Item style. Daarmee kun je pagina-items individueel stijlen. De tab Item style vind je in geavanceerdere templates, zoals de Onepager, Onepager tiles, Timeline en Longread. Tabblad SEO: zoekmachine-instellingen regelen In het tabblad SEO (Search Engine Optimization) kun je eventueel je pagina s optimaliseren voor vindbaarheid in zoekmachines zoals Google. Gebruik hier alleen woorden en teksten die ook daadwerkelijk op de pagina voorkomen. Instant Magazine Quick Guide 8

9 De Meta description wordt door Google gebruikt bij het weergeven van de zoekmachineresultaten. Ook wordt de description gebruikt als je de pagina deelt op Facebook. Tabblad Overlays: kaders toevoegen Aan elke pagina kun je een overlay toevoegen: tekst en beeld die verschijnen in een popupvenster. Klik op het tabblad Overlay en klik op de + om een overlay te maken. Vul de overlay met content en bewaar deze via Save. De overlay staat nu klaar om gekoppeld te worden aan de tekst. Ga naar de tab Content en selecteer de tekst waar de overlay aan gekoppeld moet worden. Klik rechtsboven in de teksteditor op de knop Insert/edit link. Daar selecteer je bij To overlay de overlay die je eerder hebt gemaakt. Bij Style bepaal je hoe de link eruitziet. Maak je geen keuze, dan wordt het een tekstlink. Kies je voor Button, dan komt de link naar de overlay in de vorm van een button. STAP 4: Issue settings aanpassen In de vorige stappen heb je een title gemaakt en een issue toegevoegd. Daarna heb je pagina s gemaakt voor dat issue. Als je een issue bewerkt, is ook de knop Settings beschikbaar. Klik daarop om de instellingen voor dit magazine te regelen. Instant Magazine Quick Guide 9

10 Op deze pagina kun je de volgende instellingen aanpassen: Issue name : geef de naam van de uitgave op. Issue alias : de naam die in de URL van het magazine verschijnt. Social platforms : selecteer welke social share buttons in de navigatie van je issue te zien zijn. Language : stel de taal voor de vaste teksten op de pagina in, zoals Read more/lees meer. Title : bepaal onder welke title jouw issue valt. Je kunt de issue dus achteraf verplaatsen naar een andere title. Een korte uitleg over de overige items op deze pagina: Buttons in navigation bar: voeg eventuele custom buttons toe aan de navigatiebalk, bijvoorbeeld voor een colofon. Form builder: om formulieren aan te maken in je issue. Cookie check: kies Enable cookie check als je een cookiecontrole wilt instellen voor je magazine. De bezoeker moet dan vooraf akkoord gaan met het gebruik van cookie s. Header: om op elke pagina een header, logo of call-to-action toe te voegen. Acces control: kan op twee manieren: By password : bezoekers krijgen alleen toegang als ze het goede wachtwoord invoeren (of een combinatie van username en password). Whitepaper : bezoekers krijgen alleen toegang als ze bepaalde informatie invullen. Bijvoorbeeld hun naam en adres. Advanced: een aantal geavanceerde functionaliteiten. Bijvoorbeeld de zoekfunctie in- of uitschakelen, en andere issues wel of niet zichtbaar maken voor de bezoeker. Instant Magazine Quick Guide 10

11 Stap 5: je magazine publiceren Klaar? Voordat je magazine gepubliceerd wordt, kun je altijd een preview bekijken via de knop Preview. Is het magazine helemaal naar wens? Dan kun je publiceren! Klik op de knop Publish en loop de checklist op het scherm na. Daar zie je een aantal punten waar je op moet letten. Belangrijke punten vóórdat je publiceert: Checklist voor publiceren: Is de hostname goed ingevuld in de Title settings (zie stap 1 van deze handleiding)? Heb je je eigen (sub)domein gekoppeld via je domeinbeheer? Als je wilt weten hoe dat moet, kijk dan hieronder in de FAQ. Heb je bij de Title Settings de UA-code van Google Analytics ingevuld (als je het bezoekersgedrag van het magazine wilt meten)? Heb je het magazine gecontroleerd op tablet en mobile formaat? Zien alle pagina s er goed uit op alle formaten? Zijn alle links vanuit het magazine goed gekoppeld? Heb je alle overlays getest? Openen de links naar overlays zoals gewenst? Heb je eventuele formulieren getest? Komen ze binnen per mail? In de FAQ worden een aantal van bovenstaande punten uitgelegd. Instant Magazine Quick Guide 11

12 FAQ Waar voeg ik mijn logo toe? Klik op Titles en klik bij de gewenste title op Edit. Aan de rechterzijde zie je de Title settings. Daar kun je drie logo s uploaden: Logo : het logo van de title; dit staat in de navigatiebalk. Icon : dit verschijnt in de navigatiebalk in de mobiele weergave, als favicon in de browser én als app-icon op je mobiel/tablet (als je het magazine toevoegt aan je beginscherm). De afbeelding moet vierkant zijn. Loader : het logo dat wordt getoond als het magazine wordt geladen. Hoe koppel ik mijn domeinnaam? Vul bij Title settings bij Hostname een domeinnaam in. Dat kan een domein zijn of een subdomein (bijv. magazine.jouwdomein.nl). Vervolgens log je in op het administratiepaneel van je domein. Deze gegevens heb je van je provider ontvangen. Hier maak je bij de DNS-gegevens een subdomein aan. Als type kies je voor een CNAME. Bij het serveradres vul je in: s1.instantmagazine.com (bij sommige providers is de punt na com belangrijk). Kan ik meerdere domeinen koppelen aan één title? Binnen Instant Magazine kun je één domeinnaam koppelen per title. Wil je toch meerdere domeinen naar je magazine laten verwijzen? Dan kun je bij je providers een doorstuurservice activeren (een URL redirect). Bezoekers komen dan via de andere URL automatisch uit bij de URL van het magazine. Een URL redirect gebruik je ook als je wilt dat gebruikers met én zonder de toevoeging www aan de URL uitkomen bij je magazine. Welke videostreams kan ik embedden? In de videotemplate kun je een link naar een video op YouTube, Vimeo of Wistia embedden. Je kunt video s in de paginacontent embedden, en je kunt ze ook achter een button of overlay plaatsen. Hoe kan ik Google Analytics integreren? Via Reports vind je in Instant Magazine informatie over het aantal bezoekers, pageviews, bezoektijd en meer. Wil je je magazine nog uitgebreider meten dan mogelijk is met deze standaard meetfunctie? Dan kun je bij de title een UA-code invoeren. Maak eerst via Google Analytics ( ) een profiel of property aan voor je magazine. Daarna ontvang je een unieke UA-code. Als je de title bewerkt, zie je rechts in de Title settings het veld Google Analytics. Vul hier de UA-code in. Instant Magazine Quick Guide 12

13 Hoe plaats ik een achtergrond video (full screen video)? Bij de meeste templates kun je op de achtergrond een video af laten spelen. Dat doe je zo: Klik op het tabblad Content. Klik bij Background op Browse. Je ziet nu de inhoud van de Image Gallery. Klik op Video > Add new video en vul de YouTube ID in. Dat is het laatste deel (de cijfer- en lettercode) van de YouTube-URL. Door op het tandwieltje te klikken naast de ID kun je aangeven wanneer je video moet starten en eindigen. Full screen video wordt niet ondersteund door mobiele apparaten. Kies daarom ook bij Select image voor een fall-back afbeelding. Dat is een afbeelding die wordt getoond in plaats van de video. Hoe pas ik de paginavolgorde aan? Bij Pages kun je het icoon gebruiken om de pagina s naar boven of onder te slepen. Hoe kan ik mijn magazine personaliseren? Je kunt de ontvanger nóg persoonlijker aanspreken door je magazine te personaliseren. Dit kan bijvoorbeeld door zijn/haar naam en bedrijfsnaam op de cover te plaatsen. Het werkt zo: Open een issue om te bewerken en ga naar Settings > Advanced. Vink Enable personalization aan. Nu kun je bij de verspreiding van je magazine in de URL de gepersonaliseerde variabelen meegeven. Bijvoorbeeld de variabele name : De variabele name kun je overal in je magazine gebruiken. Dit doe je door in de editor {{name}} op de gewenste positie in te voeren. Bijvoorbeeld de volgende tekst: Welkom, {{name}}. Wil je een alternatieve tekst (fall-back) tonen als de variabele name niet wordt meegegeven? Dan kun je de volgende code gebruiken: als name niet bestaat dan alternatief einde als {{^name}} Welkom {{/name}} als de naam wel bestaat dan tonen einde als {{#name}} Beste {{name}} {{/name}} Voorbeeld eindresultaat: {{#name}}beste {{name}}{{/name}}{{^name}}welkom{{/name}}, I--- personalisatie ---I--- alternatief ---I Instant Magazine Quick Guide 13

14 Kan ik mijn magazine delen op social media? Je kunt je magazine per pagina delen op sociale kanalen. De instellingen van het delen regel je op de pagina zelf.. Open de pagina en klik op de tab SEO. Bij Meta description vul je de tekst in die op de sociale media wordt getoond als de pagina wordt gedeeld. Daarnaast kun je er ook voor kiezen om een Social share url aan te geven, dit doe je als je niet wilt dat het gehele magazine op social media gedeeld worden maar bv. slechts een aantal pagina s. Hoe plaats je een button in een tekstvlak? Typ de gewenste linktekst in het tekstvlak, bijvoorbeeld Lees meer. Selecteer deze tekst en klik in de editor op via Insert/edit link. Nu kun je een link aanmaken. Dit zijn de opties: URL: wil je een link maken naar een externe URL? Vul die hier in. Kies dan wel bij Target voor New window, anders verlaat de bezoeker het magazine. Text to display: deze tekst staat in de button/link. To page: wil je een link maken naar een pagina in het magazine? Kies hier de pagina. To overlay: om een link te maken naar een overlay. Die overlay moet je al eerder hebben aangemaakt (via het tabblad Overlay). Target: als je kiest voor None, opent de gekoppelde pagina in het huidige venster. Als je kiest voor New window, opent de koppeling in een ander browservenster. Style: met None maak je een tekstlink, met Button maak je een link in een knop. Kun je in een tekstvlak verschillende lettergroottes aangeven? Alle tekst in een tekstvlak heeft dezelfde grootte en stijl. Wel kun je tekst natuurlijk vet of cursief maken. Wil je andere wijzigingen in de letteropmaak aanbrengen, bijvoorbeeld door tekst weer te geven als een H2-kop? Dan kun je dat in de HTML-sourcecode aangeven. Klik daarvoor op de knop Source code in de editor. Instant Magazine Quick Guide 14