In dit document krijg je een overzicht van de belangrijkste functies en elementen van het nieuwe onderhoudsprogramma voor cluster websites. Page 1
1. Inloggen om de site te bewerken (voor een live website) Op iedere pagina van je website staat helemaal linksonderin een icoontje van een pijl die naar binnen wijst. Klik erop om naar de inlogpagina te gaan. NB: eenmaal ingelogd kun je alle pagina's bewerken. Het maakt dus niet uit op welke pagina je op het icoontje klikt. NB2: het icoontje doet niets anders dan "/login" achter je website adres te plakken. Als je website adres luidt: www.cluster.st-er.nl, dan kun je inloggen op adres: www.cluster.st-er.nl/login. Page 2
1.1 Inloggen om de site te bewerken (voor een website die nog niet live is) Zolang je website nog niet live is, kun je de site bekijken via het preview-adres dat je hebt gekregen. Dat adres heeft de vorm : http://preview.st-er.nl/xxxxxx Op de plaats van de x-tekens staat een code die uniek is voor jouw site. Door aan het adres toe te voegen: "/login", kom je bij het inlogscherm: dus: http://preview.st-er.nl/xxxxxx/login Page 3
1.2 Inloggen Het inlogscherm verschijnt en je logt in met je gebruikersnaam (= e-mailadres) en wachtwoord. Er is een "wachtwoord vergeten" linkje waarmee je een nieuw wachtwoord kunt instellen als je het oude bent vergeten. Page 4
1.3 1e Keer inloggen: wachtwoord wijzigen Voor je eerste inlog heb je van de webredactie een tijdelijk wachtwoord gekregen. Zodra je daarmee inlogt verschijnt dit scherm en moet je zelf een wachtwoord kiezen. Page 5
1.4 Accountinstellingen Na de eerste keer inloggen en het verplicht wijzigen van je wachtwoord, kom je in onderstaand scherm. Het biedt de mogelijkheid om: Je naam, wachtwoord en/of e-mailadres te wijzigen Uit te loggen Naar "Mijn Site" te gaan Page 6
2. Mijn Site: startscherm Dit is het scherm waarop je terechtkomt na het inloggen (behalve de eerste keer). Via het menu kun je naar de accountinstellingen (1) en uitloggen (6) Het bevat statistieken m.b.t. het bezoek van je website (3). Hier kun je ook het commentaar beheren dat bezoekers op je site hebben achtergelaten (tabblad "comments"). (4) Het tabblad "Form Entries" is voor het beheren van gegevens die bezoekers hebben ingevuld in formulieren op je site. (5) De belangrijkste functie op deze pagina is Site bewerken (2) Page 7
3. Pagina's bouwen! Bij het bewerken van je site zijn er 2 hoofdonderdelen: "Bouwen" en "Pagina's". "Bouwen" is het bewerken van de inhoud van een pagina met "Pagina's" bepaal je welke pagina's er zijn en wat hun volgorde is. Page 8
3.1 Bouwen, de inhoud van een pagina Het onderdeel "Bouwen" is waar Weebly echt in uitblinkt: het zo intuïtief en makkelijk mogelijk bewerken van de inhoud van je site Page 9
3.2 Pagina's, de structuur van je site Page 10
4. Het onderdeel Pagina's In het onderdeel Pagina's kun je zeer eenvoudig: pagina's toevoegen pagina's verwijderen pagina's kopiëren. de volgorde van pagina's veranderen pagina's onder een andere pagina plaatsen (zodat een subpagina ontstaat) Page 11
4.1 Pagina's verplaatsen De volgorde van de pagina's in je site verander je eenvoudig door ze naar een nieuwe plaats in de lijst te slepen. Page 12
4.2 Pagina's toevoegen: stap 1 Klik op de Toevoegen-knop (1) Kies vervolgens om een "standaard pagina" aan te maken (2). Met de andere optie, "Externe koppeling" (3) kun je verwijzen naar een een pagina op een andere website. In het menu van jouw website komt er dan een link naar die andere site. TIP: gebruik een Externe Koppeling om een hoofdonderwep in je websitemenu te maken, waaronder dan een aantal subpagina's komen te "hangen". Dat kan natuurlijk ook met een Standaard Pagina, maar dan ben je ook verplicht om die pagina te vullen. Bezoekers kunnen 'm immers aanklikken. Als je in plaats van Standaard Pagina kiest voor Externe Koppeling en daarbij het webadres ("URL") leeg laat, dan komt de pagina wel in het menu, maar als je er op klikt dan klapt alleen het submenu uit en verder gebeurt er niets. Je hoeft dan de "hoofdpagina" dus niet van inhoud te voorzien. Page 13
4.3 Pagina's toevoegen: stap 2 Nadat je in de vorige stap hebt gekozen voor het toevoegen van een "standaard pagina", kun je de kenmerken van de pagina gaan invullen: Zo is er: de naam (1) een vinkje waarmee je de pagina kunt verbergen in het websitemenu (2) de globale indeling van de pagina. (3) Hier geef je aan welk soort pagina het moet worden. de zichtbaarheid van de pagina. Daarmee is het mogelijk om de pagina achter een wachtwoord te zetten. De nieuwe pagina is automatisch toegevoegd onderaan het lijstje met pagina's. Page 14
4.4 Pagina's toevoegen: stap 3 In deze laatste stap sleep je de pagina naar de gewenste plaats in de site. Dit kun je overigens op elk gewenst moment weer veranderen. Als je tijdens het slepen wat meer naar rechts beweegt dan ontstaat een subpagina. Pak je een subpagina beet en beweeg je 'm naar links dan wordt het een hoofdpagina. Je kunt zo ook sub-subpagina's en sub-sub-subpagina's maken! Page 15
4.5 Pagina verwijderen Via de knop "Pagina verwijderen" kun je de geselecteerde pagina verwijderen. Er wordt vervolgens eerst nog om een bevestiging gevraagd, want een verwijderde pagina is niet meer terug te halen. Page 16
4.6 Pagina kopiëren Door een pagina te selecteren in de lijst en vervolgens te drukken op de knop "Pagina kopiëren", ontstaat onmiddelijk een kopie van de geselecteerde pagina. Deze kopie staat in de lijst dan helemaal onderaan. NB: Het is niet mogelijk om pagina's uit een andere site te kopiëren. Page 17
5. Pagina indelingen In Weebly kun je pagina's in principe volledig vrij zelf indelen. Er zijn echter pagina-indelingen waarbij enkele vaste onderdelen in de pagina worden opgenomen. Hieronder zie je een overzicht: basis: Volledig vrij in te delen pagina, voor de meeste doeleinden geschikt. basis-minder-breed: Gelijk aan basis, maar de in te delen ruimte is smaller doordat de kantlijnen breder zijn. Als je maar één kolom op je pagina hebt dan blijft de tekst ook op een PC-schem prettig leesbaar. kolom-links: Pagina heeft een vaste kolom ("sidebar") aan de linkerkant, o.m. te gebruiken voor navigatie-linkjes (submenu). De inhoud van de kolom is uniek voor de pagina kolom-links-vast : Pagina heeft een vaste kolom ("sidebar") aan de linkerkant, o.m. te gebruiken voor navigatie-linkjes (submenu). De inhoud van de kolom komt automatisch terug op elke pagina met deze indeling. kolom-rechts: Pagina heeft een vaste kolom ("sidebar") aan de rechterkant, o.m. te gebruiken voor navigatie-linkjes (submenu). De inhoud van de kolom is uniek voor de pagina kolom-rechts-vast : Pagina heeft een vaste kolom ("sidebar") aan de rechterkant, o.m. te gebruiken voor navigatie-linkjes (submenu). De inhoud van de kolom komt automatisch terug op elke pagina met deze indeling. nieuws: Deze indeling maakt van je pagina een weblog die uitstekend bruikbaar is voor nieuwsberichten. Page 18
6. Bouwen Bouwen: "Sleep elementen hiernaartoe" Page 19
6.1 Slepen vanuit de linker kolom De linker kolom van de Weebly website builder bevat de elementen die je kunt gebruiken op je pagina's. Kies een element en sleep het naar je pagina. De blauwe lijn geeft aan waar het element zal "vallen". Page 20
6.2 Loslaten van een element Zodra je de muisknop loslaat, "valt" het element op de plek die met een blauwe lijn werd aangegeven. Vervolgens kun je klikken op het element om het te bewerken. Page 21
6.3 Element bewerken Pas het element naar wens aan. In dit voorbeeld is het een tekst. Page 22
6.4 Kopieëren, verplaatsen en verwijderen Als je met de muis over een element op de pagina gaat, dan komt er een dun blauw lijntje om het element, met aan de bovenkant drie functies: 1. Knopje om het element te kopiëren naar deze of een andere pagina, of te verplaatsen naar een andere pagina 2. Handvat om het element te verslepen binnen de pagina 3. Knopje om het element te verwijderen Page 23
6.5 Kolommen maken Kolommen maak je eenvoudig door een element links of rechts naast een bestaand element te slepen. Let op het blauwe streepje dat aangeeft waar het nieuwe element zal "vallen" als je de muisknop loslaat. De beschikbare ruimte wordt dan verdeeld over twee kolommen. Sleep je er nog een element naast, dan onstaan er 3 kolommen, enz. Page 24
6.6 Kolombreedte aanpassen In dit voorbeeld zie je 3 kolommen, maar ze zijn niet even breed. Je kunt de breedte aanpassen door op de grens tussen 2 kolommen te klikken en naar links of rechts te slepen. De breedte zal dan stapsgewijs worden aangepast. TIP: Als je de Shift-toets ingedrukt houdt tijdens het slepen, dan kun je geheel traploos de breedte aanpassen. Page 25
6.7 Kolom verwijderen Verwijder stuk voor stuk de elementen uit de kolom die je weg wilt hebben, of sleep ze naar een nieuwe plek op de pagina. Zodra de kolom leeg is zal hij automatisch verdwijnen. Page 26
7. Beschikbare Elementen Hieronder volgen voorbeelden van de meest belangrijke elementen die tot je beschikking staan. Page 27
7.1 Element Titel Gebruik titels om kopjes te maken boven pagina's en boven teksten. Door de lettergrootte aan te passen kun je hoofd- en subkoppen maken Page 28
7.2 Element Tekst Het tekstelement kan worden gebruikt voor lange en voor korte teksten. De tekst kan worden bewerkt met de volgende functies (zie afbeelding): 1. Vet, schuingedrukt en onderstreept 2. Lettergrootte groter en kleiner 3. Kleur van de tekst 4. Maak een link naar een pagina binnen of buiten de site 5. Uitlijning van de tekst 6. Opsomming genummerd of ongenummerd 7. Opmaak van tekst verwijderen. Gebruik dit wanneer tekst is gekopieerd uit andere bronnen. 8. Undo / Redo: ongedaan maken van de laatste bewerking(en). Een tekst element kan ook een afbeeldingselement bevatten! Sleep een afbeeldingselement daartoe op het tekstelement en kies vervolgens of je het links of rechts uitgelijnd wilt hebben. Page 29
7.3 Element Afbeelding Een afbeelding kan eenvoudig worden toegevoegd vanaf je computer of door de link naar een afbeelding elders op het internet in te voeren. De volgende functies staan tot je beschikking: 1. Sleep de hoek rechtsonder om de grootte van de foto te wijzigen. 2. Bewerk de foto (o.a. bijsnijden, kleureffecten, afbeelding toevoegen (bijv. logo o.i.d.)) 3. Uitlijning van de foto, links, midden of rechts. 4. Lightbox houdt in dat als een bezoeker op de foto klikt, deze vergroot wordt weergeven, terwijl de achtergrond wordt gedimd. 5. Via de link functie kun je van de afbeelding een link maken naar een andere pagina binnen of buiten je site. 6. Spatie heeft betrekking op de hoeveelheid witruimte boven en onder de foto 7. Via de optie Beschrijving kun je een onderschrift toevoegen aan de foto. 8. Via Geavanceerd kun je een rand om de foto aanbrengen en een tekst voor blinden en slechtzienden opgeven. Page 30
7.4 Element Tekst gecombineerd met afbeelding Sleep eenvoudigweg een afbeeldingselement over een tekst element. Kies vervolgens de juiste afbeelding. Via de rechteronderhoek van de afbeelding kun je de grootte aanpassen, sleep de hoek totdat de afbeelding de gewenste afmetingen heeft. Klik op de foto om de instellingen aan te passen. Onder de rubriek "geavanceerd" van de instellingen vind je de optie om de foto links of rechts in je tekst te plaatsen. De tekst vloeit er vervolgens automatisch omheen, met de juiste afstand tot de afbeelding. NB: Per tekstelement kun je één afbeeldingelement toevoegen. Heb je een langere tekst die je met plaatjes wilt illustreren, verdeel de tekst dan over meerdere tekstelementen. Page 31
7.5 Element: Galerij Een galerij element laat meedere foto's zien, in rijen en kolommen. Bezoekers kunnen klikken op een foto om deze groot in beeld te krijgen, en vervolgens te bladeren door de andere foto's. Elke foto kan een link zijn naar iets anders, of van een onderschrift worden voorzien. Ook kun je instellen uit hoeveel foto's er op één regel getoond moeten worden (aantal kolommen). Page 32
7.6 Element Diapresentatie Via een dispresentatie kun je vele afbeeldingen toevoegen waarvan er steeds één groot in beeld is. De foto's kunnen elkaar automatisch afwisselen en je kunt kiezen om kleine versies van de foto's (Thumbnails) naast de grote foto te tonen. Page 33
7.7 Element Kaart / Map / Plattegrond Met dit element kun je eenvoudig een Google Maps kaartje van een bepaald adres invoegen. Page 34
7.8 Element scheidingslijn Met een scheidingslijn kun je onderdelen van een pagina (of van een kolom) van elkaar scheiden. De lege ruimte boven en onder de lijn kun je instellen. De scheidingslijn kan alleen horizontaal worden toegepast. Page 35
7.9 Element Ruimte Met het ruimte element ("spacer") kun je lege ruimte creëren. Door aan het blauwe balkje onderin te slepen, kun je traploos de hoogte bepalen. Je kunt er ook een lege kolom mee forceren. Sleep 'm daartoe naast een bestaand element en pas vervolgens de kolombreedte aan (zie 6.6 van deze handleiding). Page 36
7.10 Element Knop Een knop kun je gebruiken als prominente link naar een ander onderdeel van de site. Page 37
7.11 Elementen Media Je kunt diverse soorten media gebruiken op je pagina: 1. HD Video bestanden 2. Audiobestanden (bijv. MP3) 3. Geopende documenten (bijv, Word of PDF), die direct kunnen worden gelezen en doorgebladerd op je site. 4. Films van YouTube 5. Willekeurige bestanden kun je via je site ter beschikking stellen. Page 38
7.12 Elementen Overig De overige elementen die je kunt toepassen zijn: 1. Een ingesprongen blok tekst, bijvoorbeeld een uitspraak van iemand 2. Sociale media knoppen, deze vormen links naar je Facebook, Twitter, Pinterest, Google+ en andere sociale media 3. Een enquete formulier 4. Een contactformulier 5. Een zoekveld om binnen je site te zoeken. Page 39
8. Opslaan en publiceren Alle wijzigingen die je doet worden door Weebly altijd automatisch opgeslagen. Daar hoef je geen moeite voor te doen. Zolang de website niet live is en alleen bekeken en bewerkt kan worden via het preview-adres, zijn alle wijzigingen ook meteen zichtbaar voor iedereen die het preview-adres kent. Als je website live is, dan zie je rechtsbovenin het scherm een oranje "PUBLICEREN" knop. Alle wijzigingen die je doet worden opgeslagen, maar zijn nog niet zichtbaar voor het publiek. Zo kun je vandaag, morgen en bijv. volgende week aanpassingen doen terwijl de website voor het publiek al die tijd ongewijzigd blijft. Pas als je op de PUBLICEREN knop klikt worden alle wijzigingen in één keer doorgevoerd en kan iedereen ze zien. Je kunt zovaak op PUBLICEREN klikken als je wilt, dus ook voor kleine wijzigingen. Page 40
9. Uitloggen Alles wat je doet in Weebly wordt automatisch opgeslagen. Je kunt dus eigenlijk gewoon het venster van je browser (Google Chrome) sluiten zodra je wilt stoppen met bewerken. De "nette" manier om te stoppen is als volgt: 1. klik op het "hamburger" menu helemaal rechtsbovenin je scherm. 2. kies voor Editor verlaten, je komt nu weer op het hoofdscherm. 3. Op het hoofdscherm, klik op UITLOGGEN. Page 41