HANDLEIDING PAGEUPDATER 4.8 AAN DE SLAG, TIPS EN NASLAG
LAURENZ WEBSITES & VORMGEVING
INHOUD AAN DE SLAG Stap 1 – Inloggen............................................................3 Stap 2 – Nieuwe pagina maken...................................3 Stap 3 – Kop bewerken..................................................4 Stap 4 – Tekst invoegen.................................................4 Stap 5 – Tekst opmaken en links invoegen................5 Stap 6 – Foto’s plaatsen................................................6 Stap 7 – Voorbeeld bekijken.........................................7 Stap 8 – Pagina publiceren...........................................7
MEER MOGELIJKHEDEN Kolommen........................................................................8 Subpagina’s.....................................................................9 Interne links.....................................................................9 Video, social media en maps embedden....................9 Handig te weten........................................................... 10
WERKEN MET MODULES Modules plaatsen........................................................ 11 Fotogalerij..................................................................... 11 Formulieren.................................................................. 12 Artikelen........................................................................ 13 Agenda........................................................................... 13 Nieuwsbrief.................................................................. 14 Mini webshop............................................................... 16 Template manager ..................................................... 17
PROBLEMEN OPLOSSEN Wachtwoord vergeten................................................. 18 Foto uploaden lukt niet............................................... 18 Webfonts....................................................................... 18
BIJLAGEN Voorbeeldformulier..................................................... 19 Formaten....................................................................... 20
HANDLEIDING PAGEUPDATER — 2
AAN DE SLAG In deze tutorial leer je stap voor stap de basics van PageUpdater. Voor uitgebreidere instructies kun je terecht in het tweede deel van de handleiding. Ga vooral zelf op ontdekking, het systeem heeft ongekende mogelijkheden.
STAP 1 – INLOGGEN Voordat je de website kunt bewerken, moet je eerst inloggen in PageUpdater: 1. Tik in de URL-balk het adres van je website in met daarachter de toevoeging /admin, bijvoorbeeld: http://www.mijnwebsite.nl/admin 2. Vul je e-mailadres en wachtwoord in en klik op OK 3. Nu verschijnt het scherm Pagina’s; vanuit dit scherm kun je de website bewerken TIP: ben je de wachtwoord kwijt? Zie de sectie Problemen oplossen voor het resetten van je wachtwoord. Het scherm Pagina’s toont een overzicht van alle pagina’s. Als je op een paginatitel klikt, opent de pagina in een nieuw tabblad. Om efficiënt en snel te werken is het handig om twee tabs open te zetten: een met PageUpdater en een met de website.
STAP 2 – NIEUWE PAGINA MAKEN In PageUpdater kun je pagina’s aanmaken en die op verschillende locaties op de site plaatsen: in het Hoofdmenu, het Menu bovenaan, het Menu onderaan of Niet in menu. Pagina’s in het Hoofdmenu verschijnen in het (grote) menu van je website. Pagina’s in Menu bovenaan zie je rechtsboven, de pagina’s in Menu onderaan vind je in de voetregel. Pagina’s in Niet in menu zijn niet direct zichtbaar voor bezoekers en alleen te bereiken via een link of URL. Ga als volgt te werk om een nieuwe pagina aan te maken: 1. Klik in het scherm Pagina’s op Nieuwe pagina (bovenaan naast de titel Pagina’s). Er verschijnt een overzichtslijstje, onderverdeeld in de menu’s 2. Selecteer de pagina waaronder de nieuwe pagina moet verschijnen en klik op OK 3. In het scherm Eigenschappen pagina vul je vervolgens bij het tekstveld Menu titel de naam van de pagina in. Let op, dit is de naam van de menuknop die op je homepage verschijnt, zoals bijvoorbeeld: Contact 4. Vul bij tekstveld Pagina titel een titel in die kort de essentie van de pagina weergeeft. Deze titel is te zien in het tabblad van de browser 5. Klik op Opslaan
HANDLEIDING PAGEUPDATER — 3
STAP 3 – KOP BEWERKEN PageUpdater begint standaard elke nieuwe pagina met een kop. Deze kun je als volgt bewerken: 1. 2. 3. 4.
Klik op Bewerk naast de pagina die je wilt bewerken Klik naast de kop op Bewerk om de kop aan te passen (dubbelklikken op de kop zelf kan ook) Type in het tekstveld Tekst de gewenste tekst in Klik vervolgens op Opslaan
STAP 4 – TEKST INVOEGEN Om tekst in te voegen moet je eerst een nieuw item aanmaken. Doe dit als volgt: 1. Klik op Nieuw item (bovenaan naast de titel Bewerk pagina) 2. Selecteer in de linkerkolom het soort item dat je wilt invoegen (in dit geval Tekst) 3. In de rechterkolom klik je op het item waaronder je het item wilt plaatsen (in dit geval de zojuist aangepaste kop) 4. Klik op OK 5. In het tekstvak Tekst dat verschijnt kun je tekst typen 6. Wanneer je klaar bent, klik je op Opslaan Een snellere manier om een item in te voegen is via de zogenaamde quick insert-tool (het dropdownmenu onderaan het scherm). Hiermee kun je een item direct onder het voorgaande invoegen. 1. Klik naast Nieuw item hier toevoegen op Selecteer item 2. Kies het gewenste item door het aan te klikken (in dit geval Tekst) TIP: de volgorde van items kun je wijzigen door in het Bewerk Pagina scherm op Verplaats te klikken naast het item dat je wilt verschuiven.
WORD TEKST IMPORTEREN Lange (Word)teksten plaatsen op een pagina gaat sneller en makkelijker met de importeerfunctie. Je vindt de functie – die Importeer heet – bovenaan in het bewerkscherm.
HANDLEIDING PAGEUPDATER — 4
STAP 5 – TEKST OPMAKEN EN LINKS INVOEGEN Je hebt de tekst al opgeslagen, maar wanneer je (delen) tekst wilt opmaken of een link wilt maken, kan dat met de toolbar rechts van het tekstvenster. 1. Dubbelklik op de tekst die je wilt bewerken 2. Selecteer in de tekst de woorden die je wilt opmaken 3. Klik in de toolbar op een van de icoontjes: = vet, = cursief, = onderstreept. De geselecteerde tekst verschijnt nu tussen codes, zogenaamde bulletin board codes 4. Klik op Opslaan Om een inline link (link in de lopende tekst) in te voegen volg je een soortgelijke handeling: 1. Selecteer in het tekstdeel waarvan je de link wilt maken 2. Klik een van de drie onderste icoontjes aan: = link, = link opent in nieuw tabblad, = mail-link) 3. Voeg de URL (bij een mailto-link het e-mailadres) in het tekstveld en klik op OK. LET OP! Zorg ervoor dat een URL altijd begint met http:// 4. Klik op Opslaan
EXTRA CODES De onderstaande bulletin board codes kan je handmatig invoegen: [s]Doorgehaalde tekst[/s] [sub]Subscript[/sub] [sup]Superscript[/sup] [code]Programmacode[/code] [big]Grote tekst[/big] [small]Kleine tekst[/small] [size=20pt]20 punts tekst[/size] [color=red]Rode tekst[/color] [img]./website/database/uploads/Test/test.jpg[/img]
HANDLEIDING PAGEUPDATER — 5
STAP 6 – FOTO’S PLAATSEN Voer de volgende stappen uit om een foto op een pagina te plaatsen: 1. Selecteer via Nieuw item of de quick insert-tool in de lijst het item Afbeelding en plaats dit op de gewenste plek 2. Klik op Upload (naast Selecteer afbeelding) 3. Selecteer de fotomap waarin je de foto wilt uploaden (of maak een nieuwe map) 4. Klik op Upload (bovenaan naast de titel Bestanden) 5. Klik op de knop Bladeren (afhankelijk van jouw systeem kan deze knop ook een andere benaming hebben). Zoek nu op je computer naar de juiste afbeelding, selecteer die en klik op Open. De naam van het bestand verschijnt. 6. Klik op Upload 7. Selecteer in het linker dropdownmenu bij Afbeelding de map waarin je de foto hebt geupload 8. Selecteer vervolgens in het rechter dropdownmenu de afbeelding die je wilt plaatsen 9. Als je wilt dat de tekst om de foto heen loopt moet je eerst bij Positie kiezen voor Links of Rechts. Vervolgens kies je bij Breedte voor 30%, 45% of 60%. 10. Klik op Opslaan
TIP: selecteer voordat je gaat uploaden eerst een fotomap in het dropdownmenu bij Afbeelding. Wanneer je dan op Upload klikt, kom je meteen in de geselecteerde map terecht en kun je direct beginnen met uploaden.
LET OP! Voor het opmaken van een pagina die je als nieuwsbrief gaat versturen, kun je beter geen gebruik maken van het item Afbeelding. De mogelijkheden die dit item biedt (schalen en tekstomloop) werken niet in een nieuwsbrief. Gebruik voor nieuwsbrieven altijd het item Afbeelding (nieuwsbrief) en schaal foto’s bij het uploaden naar het juiste formaat. In de sectie Bijlagen vind je een overzicht van de geschikte formaten.
HANDLEIDING PAGEUPDATER — 6
STAP 7 – VOORBEELD BEKIJKEN Wanneer je klaar bent met het plaatsen van tekst en foto’s kun je checken hoe de pagina eruit ziet. Dit doe je door rechtsboven in het Bewerk pagina scherm Bekijk pagina aan te klikken (naast de knop Klaar).
STAP 8 – PAGINA PUBLICEREN Wanneer je tevreden bent met de pagina, kun je deze zichtbaar maken voor bezoekers: 1. Klik op de knop Klaar (bovenaan bij de titel Bewerk pagina) 2. Je komt in het Pagina’s scherm terecht 3. Klik aan de rechterzijde op de optie Publiceer/depubliceer naast de pagina die je live wilt zetten. De titel van de pagina verandert van grijs in blauw zodra deze gepubliceerd is.
HANDLEIDING PAGEUPDATER — 7
MEER MOGELIJKHEDEN In deze sectie meer over werken met kolommen, subpagina’s en het maken van interne links. Ook leer je hoe je social media en YouTube-filmpjes kunt embedden. Tot slot een aantal tips.
KOLOMMEN In PageUpdater kun je links en rechts op een pagina kolommen plaatsen. Kolommen zijn aparte onderdelen die je op dezelfde manier kunt bewerken als een pagina. Een kolom plaatsen gaat als volgt: 1. 2. 3. 4. 5.
Ga naar Kolommen (in het menu geheel bovenaan het scherm) Klik op Nieuwe kolom en geef de nieuwe kolom een naam, bijvoorbeeld naw-gegevens Bewerk eventueel alvast de kolom (dit kan ook later) Ga naar Pagina’s en klik op Eigenschappen bij de pagina waaraan je de kolom wilt koppelen Selecteer in de lijst Linker kolom (of Rechter kolom) de zojuist aangemaakte kolom, in dit geval met de naam naw-gegevens en klik op Opslaan
TIP: in Bewerk Pagina navigeer je bovenaan de pagina via Bewerk gekoppelde linker kolom (of rechter kolom) snel naar de kolom die je aan de pagina hebt gekoppeld.
HANDLEIDING PAGEUPDATER — 8
SUBPAGINA’S In PageUpdater kun je van een pagina ook een subpagina maken. Dit geldt alleen voor pagina’s in het Hoofdmenu: 1. Ga naar het scherm Pagina’s 2. Klik aan de rechterzijde op Pagina/subpagina naast de pagina die je als subpagina wilt laten fungeren 3. Wanneer de subpagina niet op de juiste plek staat, klik je op Verplaats en selecteer je de pagina waaronder je de subpagina wenst te zetten
INTERNE LINKS In PageUpdater maak je interne links naar pagina’s binnen de website door (in plaats van een URL) het nummer van de pagina waarnaar je wilt linken te gebruiken. Elke pagina heeft een uniek nummer dat je kunt vinden onder Pagina’s: –– Houd de muis even stil boven de paginatitel. Er verschijnt een tooltip met het paginanummer, of: –– Klik op Eigenschappen, het paginanummer staat in het eerste veld Een interne link maak je als volgt: 1. 2. 3. 4.
Ga naar Pagina’s Klik op Bewerk bij de pagina waarop de interne link geplaatst moet worden Voeg een Link-item toe Type het paginanummer van de pagina waarnaar je wilt linken in het tekstveld URL
TIP: klik op het icoontje rechts van het tekstveld URL voor een lijst met beschikbare pagina’s.
Er zijn meerdere bewerkschermen die je de optie bieden een link te maken. In elk van die schermen hoef je voor een interne link slechts het paginanummer in te voegen in het tekstveld URL. Dit geldt ook voor inline links in bulletin board code. Een interne link in bulletin board code ziet er als volgt uit: [url=17]Contact[/url]
VIDEO, SOCIAL MEDIA EN MAPS EMBEDDEN Websites als YouTube, Facebook, Twitter en Google Maps bieden een service waarmee je bijvoorbeeld video’s, berichtenfeeds en plattegronden op je site kunt plaatsen. Hiertoe moet je enkele regels HTMLcode (ook wel embed code genoemd) van de betreffende aanbieder in je website opnemen. Ga als volgt te werk: 1. 2. 3. 4. 5.
Kopieer de gewenste HTML-code van de website van de aanbieder Ga naar Pagina’s Klik op Bewerk bij de pagina waarop de HTML-code geplaats moet worden Voeg een HTML-item in Plak de gekopieerde code en klik op Opslaan
LET OP! Wijzig de HTML-code alleen als je weet wat je doet. Incorrecte HTML kan ervoor zorgen dat de pagina niet meer werkt.
HANDLEIDING PAGEUPDATER — 9
HANDIG TE WETEN Back-up Zeker wanneer je langere tijd aan de website werkt is het handig af en toe een back-up te maken. De back-up tool vind je onder Extra > Beheer > Backup. Vergeet niet de backup te downloaden. Website APK Zowel voor zoekmachines als bezoekers is er niets dodelijker dan een website met missende afbeeldingen, niet-werkende links of onvolledig ingevulde metadata. PageUpdater speurt deze problemen op met een speciale controletool. Je kunt hem vinden onder Extra > Beheer > Controle. Sjablonen Gebruik je vaak pagina’s met dezelfde opbouw en lay-out? Je kunt paginasjablonen maken en deze plaatsen onder de sectie Niet in menu. Wanneer je een nieuwe pagina maakt kopieer je de sjabloonpagina door simpelweg de functie Dupliceer te gebruiken. Items kopiëren Het is mogelijk een compleet item te kopiëren en elders in te voegen, zowel binnen een pagina als tussen pagina’s onderling. Gebruik hiervoor de functies Kopieer (te vinden bij het betreffende item) en Plak item (te vinden bovenaan het bewerkscherm).
Spam Krijg je veel spamformulieren binnen? Zet dan het Anti-spam veld onder Extra > Beheer > Instellingen aan. Wanneer je nog steeds spamberichten blijft ontvangen – en als de spamformulieren consequent dezelfde woorden bevatten – kun je deze woorden toevoegen aan het Spamfilter via Extra > Beheer > Spam filter). Formulieren die woorden bevatten uit het filter, worden geblokkeerd. Menu-item laten doorverwijzen Soms wil je een menu-item laten doorverwijzen naar een andere pagina, zoals bijvoorbeeld een extern forum of een Facebook-pagina. Gebruik hiervoor het veld Doorverwijzing, dat je kunt vinden bij de pagina-eigenschappen. Korte URL Standaard ziet de URL van een pagina er zo uit: http://www.mijnwebsite.nl/index.php?page=17
Dit kun je duidelijker (en zoekmachinevriendelijker) maken via het veld Korte URL, te vinden bij de pagina eigenschappen. Het woord dat je hier invult vervangt het laatste deel van de URL, dus wanneer je bijvoorbeeld contact opgeeft, ziet de URL voortaan als volgt uit: http://www.mijnwebsite.nl/contact
Versie en site omvang Informatie over de PageUpdater-versie waarmee je werkt en de totale grootte van je website kun je vinden onder Extra > Beheer > Info. Mobiele versie Check ook eens hoe jouw website er op een mobiel of tablet uitziet. Op deze apparaten wijkt de vormgeving af van de desktopversie van je site (een rechterkolom verplaatst op een mobiel bijvoorbeeld naar onderen). Bedenk goed waar je belangrijke informatie plaatst en voorkom dat de belangrijkste informatie onderop terecht komt.
HANDLEIDING PAGEUPDATER — 10
WERKEN MET MODULES Geavanceerde functionaliteiten of uitbreidingen, zoals bijvoorbeeld een formulier of webshop, vind je in PageUpdater als zogenaamde module. Modules kun je op elke gewenste pagina plaatsen.
MODULES PLAATSEN Het plaatsen van een module gaat net zo in zijn werk als het plaatsen van elk ander item: 1. 2. 3. 4.
Ga naar Pagina’s Klik op Bewerk bij de pagina waarop de module geplaatst moet worden Voeg een Module-item in en selecteer de gewenste module het dropdownmenu Vul indien noodzakelijk het tekstvak Opties in
LET OP! PageUpdater toont alleen de module. Als je via de module bijvoorbeeld een fotogalerij plaatst, geeft het CMS niet de foto’s weer. Via Bekijk pagina kun je het eindresultaat op de pagina bekijken.
FOTOGALERIJ Voer de volgende stappen uit om een fotogalerij te maken: 1. 2. 3. 4. 5.
Ga naar Bestanden Klik op Nieuwe map en vul een naam in, bijvoorbeeld Fotogalerij Klik op de zojuist aangemaakte map en kies Upload Upload de foto’s die in de fotogalerij moeten komen Plaats nu op de pagina waar de fotogalerij moet komen de Fotogalerij-module, zoals is beschreven bij modules plaatsen 6. Vul in het tekstvak Opties het volgende in: folder=mapnaam, in dit geval dus folder=Fotogalerij
LET OP! De optie folder=mapnaam moet je nauwkeurig invullen. De waarde mapnaam is hoofdlettergevoelig en moet exact overeenkomen met de werkelijke mapnaam.
HANDLEIDING PAGEUPDATER — 11
FORMULIEREN Om een formulier te maken gebruik je de Formulier-module. Ga als volgt te werk: 1. Plaats de Formulier-module op een pagina zoals beschreven staat bij modules plaatsen. Zolang je het tekstvak Opties leeg laat, verschijnt op de pagina een standaardformulier met twee tekstvelden en een tekstvak. Je kunt echter ook zelf een formulier samenstellen door diverse codes in te voeren in het tekstvak Opties. Invoervelden maak je aan met onderstaande codes: –– –– –– –– ––
field = vaste waarde: name|email|text|textarea|select|radio|checkbox caption = vrije tekst required = vaste waarde: true|false options = vrije tekst A*vrije tekst B*vrije tekst C help = vrije tekst
Gebruik voor elke code een aparte regel. De code field geeft het type invoerveld aan, caption is de titel van het invoerveld en required bepaalt of de bezoeker verplicht is het veld in te vullen. Je kunt required ook weglaten om de informatie in het veld niet verplicht te maken. De code options is alleen van toepassing op invoervelden van het type select en radio en bevat de keuzes die de gebruiker kan maken, gescheiden door een asterisk. Met de code help kun je optioneel een korte toelichting geven op een veld. LET OP! Om het formulier te laten functioneren zijn er standaard twee invoervelden vereist: name en
email. Gebruik deze invoervelden slechts één keer.
Wil je dat alle ingevulde data in een database terecht komt? Gebruik dan onderstaande code: database=database naam database naam is de naam van de database waarin alle formulierdata wordt opgeslagen. De database verschijnt op het moment dat het eerste formulier is ingevuld. Je kunt deze dan vinden onder Extra > Beheer > Formulier databases.
Normaal worden formulieren verstuurd naar de onder Extra > Beheer > Instellingen opgegeven e-mailadressen. Voor het specificeren van alternatieve e-mailadressen kun je onderstaande code gebruiken: mail=e-mailadres, e-mailadres
Zodra een formulier is ingevuld, verschijnt op het scherm een bedanktekst en wordt automatisch een e-mail naar de invuller verstuurd. Met behulp van de volgende code’s kun je de bedanktekst en de e-mail tekst aanpassen: message=vrije tekst autoreply=vrije tekst
LET OP! Gebruik een regel (dus geen enters) voor de codes message en autoreply. TIP: in de sectie Bijlagen vind je een voorbeeld waarin alle mogelijkheden worden gedemonstreerd. Dit voorbeeld is ook in PageUpdater te vinden onder Pagina’s > Niet in menu > Voorbeeldformulier.
HANDLEIDING PAGEUPDATER — 12
ARTIKELEN Met de module Artikelen kun je nieuwsberichten of een blog maken. Het aanmaken van artikelen werkt net als bij kolommen. Maar om de artikelen op de website te tonen moet je de Artikelen-module inzetten: 1. Klik op Artikelen (in het menu bovenaan het scherm naast Pagina’s). Maak een artikel aan en bewerk het naar wens. 2. Plaats op de pagina waar de artikelen moeten komen de Artikelen-module, zoals beschreven bij modules plaatsen. In het tekstvak Opties kun je de instellingen aanpassen voor de weergave van de artikelen. Zolang je het tekstvak leeg laat, toont de module vijf artikelen die ieder een kop, de eerste tweehonderd tekens en een link naar het volledige artikel weergeven. Gebruik voor elke instelling een nieuwe regel: –– Wanneer je het volledige artikel wilt tonen, vul je de code show=article in het tekstvak Opties in. Om alleen de koppen van de artikelen weer te geven, vul je show=title in. –– Het aantal artikelen op de pagina kun je aanpassen door in het tekstvak Opties de code amount=x in te vullen. Wanneer je bijvoorbeeld maximaal drie artikelen op de pagina wilt laten zien, vul je dus amount=3 in. Je kunt een archief aanmaken, waarin oudere artikelen worden getoond: Maak een nieuwe pagina aan en noem deze bijvoorbeeld of Nieuwsarchief of Blogarchief Plaats op deze pagina de Artikelen-module, zoals beschreven bij modules plaatsen. In het tekstvak Opties tik je vervolgens mode=archive. Bij amount=x tik je in vanaf welk aantal de artikelen in het archief terecht komen (dit is logischerwijs hetzelfde getal als het getal bij het plaatsen van de artikelen-module). Sla de wijzigingen op. 5. Open de artikelenpagina en maak onder de Artikelen-module een (interne) link aan naar de archiefpagina die je zojuist hebt aangemaakt.
1. 2. 3. 4.
TIP: je kunt de datum en tijd van de artikelen instellen (antedateren) om de volgorde van de artikelen te beïnvloeden. Ook kun je een datum in de toekomst invoeren voor publicatie op een later tijdstip. Klik hiertoe naast het artikel dat je wilt antedateren op Eigenschappen.
AGENDA Met PageUpdater kun je ook een agenda maken die jouw activiteiten overzichtelijk presenteert. De procedure hiervoor is praktisch dezelfde als die voor berichten. 1. Ga naar Extra > Agenda > Agenda. Maak een of meerdere agenda-items aan via Nieuw record. Vergeet niet het hokje Aan aan te vinken. Hiermee publiceer je het item. 2. Plaats op de pagina waar de agenda moet komen de Agenda-module, zoals beschreven bij modules plaatsen. In het tekstvak Opties kun je de instellingen aanpassen voor de weergave van de agenda: –– Wanneer je alleen de titel van het item wilt tonen, vul je de code show=title in –– Het aantal agenda-items op de pagina kun je aanpassen door in het tekstvak de code amount=x in te vullen. Het cijfer dat je op de plek van de x invult, geeft het maximaal aantal agenda-items op de pagina aan. Wanneer je niks invult, zie je vijf agenda-items op de pagina.
HANDLEIDING PAGEUPDATER — 13
NIEUWSBRIEF Een nieuwsbrief versturen vanuit PageUpdater is eenvoudig. Maak een nieuwe pagina aan en vul deze met tekst en foto’s. Vervolgens kun je de pagina verzenden via Extra > E-mail nieuwsbrief > Nieuwsbrief versturen. Hoe je de adreslijst beheert en gepersonaliseerde nieuwsbrieven verstuurt lees je hieronder.
LET OP! Voor het opmaken van een pagina die je als nieuwsbrief gaat versturen, kun je beter geen gebruik maken van het item Afbeelding. De mogelijkheden die dit item biedt (schalen en tekstomloop) werken niet in een nieuwsbrief. Gebruik voor nieuwsbrieven altijd het item Afbeelding (nieuwsbrief) en schaal foto’s bij het uploaden naar het juiste formaat. In de sectie Bijlagen vind je een overzicht van de geschikte formaten.
De adreslijst is een lijst met kommagescheiden e-mailadressen die je naar wens kunt aanpassen. Je vindt de lijst onder Extra > E-mail nieuwsbrief > Adreslijst. Om bezoekers de mogelijkheid te geven hun e-mailadres aan de lijst toe te voegen (of te verwijderen) kun je de module Nieuwsbrief-inschrijven op de website plaatsen, zoals beschreven bij modules plaatsen. Naast de normale adreslijst bestaat er ook een zogenaamde CSV database. Deze kun je vinden onder Extra > E-mail nieuwsbrief > CSV database. De database bevat de gegevens voor gepersonaliseerde nieuwsbrieven. Het opstellen van een gepersonaliseerde nieuwsbrief doe je als volgt: 1. Maak in een spreadsheetprogramma, zoals bijvoorbeeld Excel, een tabel aan met in de eerste kolom alle e-mailadressen. In de volgende kolommen kun je gepersonaliseerde data plaatsen, zoals een voornaam of een persoonlijke boodschap, bijvoorbeeld:
2. Selecteer de cellen uit de spreadsheet, kopieer de inhoud en plak deze in het tekstvak van de CSV database (Extra > E-mail nieuwsbrief > CSV database). Laat je niet in de war brengen door de wat rommelige opmaak, dat komt door de tabs tussen de kolommen.
3. Maak nu de pagina die je als nieuwsbrief gaat versturen. Voer op de plekken waar de gepersonaliseerde data moet komen het juiste kolomletter tussen vierkante haken in, bijvoorbeeld [B]. Op deze plek verschijnen dus de teksten uit Excel-kolom B, respectievelijk Beste Jan, Beste Lisa, en Ha Kees. LET OP! De kolomletter moet altijd een hoofdletter zijn.
HANDLEIDING PAGEUPDATER — 14
TIP: de kolomnummers kun je ook in het invoerveld Onderwerp plaatsen van de verstuur-tool (Extra > E-mail nieuwsbrief > Nieuwsbrief versturen). Zo kun je de titel van je nieuwsbrief in de inbox van je ontvangers ook persoonlijk maken. Enkele aandachtspunten: –– Gebruik geen modules, zoals een fotogalerij of formulier, op een pagina die je als nieuwsbrief verstuurt. Hetzelfde geldt voor geëmbedde content zoals video’s en plattegronden. –– Gebruik in de adreslijst en CSV database de werkelijke e-mailadressen, dus
[email protected] en niet Jan van Gerwen<
[email protected]> –– Het versturen van de nieuwsbrief kan enige tijd duren (tot wel vijftien minuten bij meer dan 2000 geadresseerden). Let op dat je computer niet in slaapstand springt. –– Verstuur je nieuwsbrief eerst naar testadressen (zie de verstuur tool), voordat je de nieuwsbrief uitstuurt naar het hele adressenbestand. –– De module Nieuwsbrief-inschrijven voegt alleen e-mailadressen toe aan de adreslijst en laat de CSV-database ongemoeid. Houd hier rekening mee!
HANDLEIDING PAGEUPDATER — 15
MINI WEBSHOP In PageUpdater kun je een eenvoudige webshop inrichten om bijvoorbeeld producten of tickets te verkopen. Hiervoor gebruik je de Winkelwagen-module: 1. Eerst maak je een aparte pagina aan met daarop de Winkelwagen-module. De handelingen hiervoor staan beschreven bij modules plaatsen. Het is raadzaam om de pagina met de Winkelwagen-module te plaatsen onder de sectie Menu bovenaan. 2. Ga naar Extra > Beheer > Instellingen en voer in het tekstveld Winkelwagen pagina het paginanummer in van de pagina waarop je zojuist de Winkelwagen-module hebt geplaatst (klik op het icoontje naast het veld Winkelwagen pagina voor een lijst met pagina’s) 3. Voeg in het tekstveld Verzendkosten de verschillende gewichtscategorieën (in grammen) en de bijbehorende verzendkosten (in centen) in. Wanneer een pakketje tot 250 gram €2,75 verzendkosten heeft, vul je 250|275 in. Gebruik één regel per gewichtscategorie. Indien voor bepaalde producten geen verzendkosten worden gerekend, gebruik dan 0|0. Voorbeeld: 0|0 250|275 10000|675
Vervolgens plaats je de webshopproducten op de gewenste pagina: 1. Ga naar Pagina’s en klik op Bewerk bij de pagina waarop je een product wilt plaatsen 2. Selecteer via Nieuw item of de quick insert-tool in de lijst het item Product en plaats dit op de gewenste plek 3. Vul de tekstvakken in. Je kunt meerdere regels gebruiken om productvarianten aan te geven (prijzen zijn in centen). Voeg het gewicht van je product (in grammen) in voor de berekening van de verzendkosten. Wanneer je in dit tekstvak een 0 invult, rekent de module geen verzendkosten.
De Winkelwagen-module telt de gewichten van alle producten in een bestelling bij elkaar op en berekent zo de verzendkosten. Bij bestelling van één T-shirt is het totaalgewicht 175 gram en wordt dus € 2,75 berekend. Bij twee T-shirts is het totaalgewicht 350 gram en komen de verzendkosten dus op € 6,75. Bij een bestelling verstuurt het systeem een orderbevestiging naar het e-mailadres van de klant en een kopie naar een door jou zelfgekozen adres. Dit kun je instellen in het tekstveld Verstuur formulieren naar onder Extra > Beheer > Instellingen. Ook slaat het systeem de order op in een database. Om de database te bekijken ga je naar Extra > Beheer > Formulier databases. TIP: je kunt de tekst onderaan de orderbevestiging (met betaalinformatie) aanpassen via Extra > Overige teksten > Webshop e-mail tekst.
HANDLEIDING PAGEUPDATER — 16
TEMPLATE MANAGER In PageUpdater kun je de vormgeving van je website overeenstemmen met de huisstijl of uitstraling van je bedrijf of organisatie. Kleuren, fonts en kaders stel je in met de Template manager. 1. Bij Extra onder het kopje Beheer klik je op Template manager 2. Klik het (onder)deel van de website aan dat je wilt bewerken. 3. Maak je keuze voor font, stijl, grootte, positie enzovoorts aan de hand van de verschillende dropdownmenu’s. Kleur kun je aanpassen door met je cursor in het tekstvak te gaan staan en met het kruisje de gewenste kleur op het palet te selecteren. Indien beschikbaar kun je ook een HTML kleurcode invoeren. 4. Vergeet niet op Toepassen te klikken wanneer je klaar bent. Werken met de Template manager is vooral een kwestie van uitproberen. Het is handig om in een apart tabblad de site te openen. Door de pagina na elke wijziging te refreshen (Cmd-R voor Mac of F5 voor Windows) kun je zien hoe de instellingen in de Template manager uitpakken aan de ‘voorkant’. Webfonts Als je een font wilt gebruiken dat niet in de Template manager voorkomt, kun je hiervoor zogenaamde webfonts importeren. 1. 2. 3. 4.
Ga naar Google Webfonts (https://www.google.com/fonts) Kies het font dat je wilt gebruiken via Add to collection Klik rechtsonderaan op Use en kies maximaal drie fonts bij 1. Choose the styles you want Klik bij 3. Add this code to your website op @import en kopieer de code, bijvoorbeeld:
5. 6. 7. 8.
Ga in PageUpdater naar de Template Manager en klik op het tabje Webfonts Plak de zojuist gekopieerde code uit Google webfonts in het tekstvak CSS@import Ga terug naar Google Webfonts en kopieer de code bij 4. Integrate the fonts into your CSS Plak deze code in PageUpdater in tekstvak CSS font-family en verwijder “font family” uit de code, bijvoorbeeld:
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
‘Ubuntu’, sans-serif;
9. Geef het lettertype een naam in het tekstvak Menunaam, bijvoorbeeld: Ubuntu
10. Klik tot slot op Toepassen
Het webfont is nu beschikbaar in alle dropdownmenu’s met lettertypen.
HANDLEIDING PAGEUPDATER — 17
PROBLEMEN OPLOSSEN WACHTWOORD VERGETEN Wanneer je jouw wachtwoord bent vergeten, kun je dit resetten. 1. Ga naar het login-scherm via http://www.mijnwebsite.nl/admin 2. Klik op Nieuw wachtwoord aanvragen 3. Vul je e-mailadres in PageUpdater stuurt je een nieuw wachtwoord per e-mail. Indien je geen e-mail ontvangt, controleer dan of het bericht in je spambox is beland. Nadat je met je nieuwe wachtwoord hebt ingelogd , kun je dit aanpassen via Extra > Beheer > Instellingen.
FOTO UPLOADEN LUKT NIET Onderstaande problemen met het uploaden van foto’s komen incidenteel voor: Systeem ‘hangt’ Het kan voorkomen dat je een (foto)bestand upload en er gebeurt vervolgens lange tijd niets. Probeer in dat geval een kleiner bestand te uploaden. Als dat wel lukt, dan zijn er op de server limieten ingesteld voor de grootte van te uploaden bestanden. Neem contact op met Laurenz, deze kan in sommige gevallen deze limieten aanpassen. Foutmelding Het kan ook voorkomen dat je een foto uploadt en een foutmelding krijgt. Deze wordt veroorzaakt doordat het fotobestand te groot is. De enige oplossing is om de foto vooraf met een fotobewerkingsprogamma te verkleinen. Zie de sectie Bijlagen voor de juiste afmetingen.
WEBFONTS In sommige gevallen krijg je een 403/Forbidden foutmelding nadat je een webfont hebt geimporteerd in de Template manager. Verwijder in dat geval de @ voor het woord import bij het tekstveld CSS @ import.
HANDLEIDING PAGEUPDATER — 18
BIJLAGEN VOORBEELDFORMULIER Onderstaand een formulier waarin alle mogelijkheden zijn opgenomen. Dit formulier is ook in PageUpdater te vinden onder Pagina’s > Niet in menu > Voorbeeldformulier. #Voorbeeldformulier #Gebruik een hekje voor het invoegen #van commentaar #LET OP: elk formulier moet minstens een #field met de waarde "name" en een field #met de waarde "email" bevatten #Zie de handleiding voor uitgebreide #informatie database=voorbeeldformulier
[email protected],
[email protected] message=Bedankt voor het invullen van de enquête. autoreply=Bedankt voor het invullen van de enquête. Onderstaand een kopie van de door u ingevulde gegevens. field=string caption=[b]PERSOONLIJK[/b] field=name caption=Naam: required=true field=email caption=Email: required=true help=Wij verstrekken uw e-mailadres niet aan derden field=text caption=Leeftijd: field=string caption=[b]ENQUÊTE[/b] field=select caption=Hoe bent u op onze website terecht gekomen? options=Via Google*Via Facebook*Anders field=radio caption=Wat vind u van ons assortiment? options=Te beperkt*Prima*Te uitgebreid*Geen mening Field=textarea caption=Vragen, opmerkingen of suggesties: field=checkbox caption=Stuur mij de uitslag van dit onderzoek
HANDLEIDING PAGEUPDATER — 19
FORMATEN Foto’s ten bate van e-mailnieuwsbrieven moeten ten alle tijden naar het juiste formaat geschaald worden bij het uploaden. Onderstaand een overzicht van de beschikbare formaten. Pagina met linker -en rechterkolom 95 px breed
95 px breed
210 px breed
440 px breed
210 px breed
210 px breed
Pagina zonder rechterkolom
680 px breed
330 px breed
330 px breed
Versie 2014-08-08
HANDLEIDING PAGEUPDATER — 20