Welkom

No Code Website Bouwer

De website van Hortus Populus is gebouwd in de No Code Bouwer van Hostinger. Om die te gebruiken, log je in op hostinger.nl met onderstaande inloggegevens:

E-mailadres

info@duurzaambodegravenreeuwijk.nl

Wachtwoord

Je kunt het wachtwoord opvragen bij Esther via info@duurzaambodegravenreeuwijk.nl.

Starten

Dashboard

Na het inloggen kom je in het dashboard van Hostinger, van hieruit beheer je alle aspecten van de website en ga je naar de No Code Builder:

1. Klik in het menu op Websites

2. Klik op Edit website achter hortuspopulus.nl (het domein)

Website bewerken

Sidebar

• In de sidebar bekijk je het paginaoverzicht en voeg je nieuwe elementen toe

• Via Website settings beheer je de mediabibliotheek

• Via Website settings beheer je de formulieren

• Via Website settings beheer je de backups

• Met de rest hoef je niets te doen

❗️Kijk eerst of je een bestaand element kunt dupliceren of kopiëren, voordat je een nieuw element toevoegt.

Voorbeeld bekijken

Je kunt een voorvertoning van de pagina bekijken door rechtsboven op Preview te klikken. Via Back to editor, in de preview linksboven, verlaat je de voorvertoning.

Site publiceren

Veranderingen worden online pas zichtbaar op de website als je rechtsboven op Update website klikt. Wacht tot de bevestiging 'Website changes are published' verschijnt.

Lagen

De elementen op de website staan in verschillende lagen, vergelijkbaar met bijvoorbeeld PowerPoint.

Positie aanpassen

1. Klik op de afbeelding of het tekstkader

2. Klik op de drie puntjes in het menu

3. Kies de gewenste laag

Secties

Elke pagina bestaat uit een opstapeling van secties. De sectie waarin je werkt wordt aangeven met een blauw kader. Bovenaan zie je 'Section' staan.

Sectie toevoegen

1. Klik op Add section, die optie verschijnt in het midden van de blauwe lijn

2. Kies een van de sjablonen

Sectie dupliceren

1. Klik in de sectie op de achtergrond

2. Kies in het menu voor Duplicate

3. Een kopie van de sectie verschijnt onder de gedupliceerde sectie

Achtergrondkleur aanpassen

1. Klik in de sectie op de achtergrond

2. Kies in het menu voor Edit section

Plek aanpassen

1. Klik in de sectie op de achtergrond

2. Klik in het menu op de pijlen om de volgorde van de secties te veranderen

Sectiegrootte aanpassen

Je maakt de sectie groter of kleiner door de hendel te verslepen.

Secties en lagen

Selecteren

Je selecteert meerdere elementen tegelijk door er met ingedrukte muis overheen te slepen. Zo kun je deze elementen gezamenlijk verplaatsen.

❗️Beperkingen

Het is niet mogelijk om binnen deze selectie een element te deselecteren. Sleep dus alleen over de elementen die je wil verplaatsen.

Selecteren en groeperen

Groeperen

❗️Beperkingen

• Het is niet mogelijk om elementen te groeperen

• Het is niet mogelijk om meerdere elementen tegelijk te bewerken, dupliceren of verwijderen

Terugdraaien

Je maakt een actie ongedaan door bovenaan de pagina op het undo-icoon te klikken of met de toetscombinatie Ctrl + Z.

Redo

Het redo-icoon staat naast het undo-icoon, hiermee maak je een undo ongedaan.

Dupliceren

Het is mogelijk om een afbeelding, tekstkader of sectie te dupliceren.

Element dupliceren

1. Klik op de afbeelding of het tekstkader

2. Kies in het menu voor Duplicate

3. Een kopie van het element verschijnt bovenop het gedupliceerde element

Sectie dupliceren

1. Klik in de sectie op de achtergrond

2. Kies in het menu voor Duplicate

3. Een kopie van de sectie verschijnt onder de gedupliceerde sectie

Dupliceren en terugdraaien

Tussen pagina's

Het is ook mogelijk om een afbeelding, tekstkader of sectie op een andere pagina te hergebruiken.

Naar kopiëren en plakken →

Plakken

Ga naar de pagina waarin je wil plakken:

1. Klik in de sectie op de achtergrond

2. Klik op de drie puntjes in het menu

3. Kies Paste of Paste section

Kopiëren

Als je een element of sectie wil hergebruiken op een andere pagina, doe je dat via copy-paste. Gebruik hiervoor de sneltoetsen Ctrl + C (kopiëren) en Ctrl + V (plakken) of volg deze stappen:

Element kopiëren

1. Klik op het element dat je wil kopiëren

2. Klik op de drie puntjes in het menu

3. Kies Copy

Sectie kopiëren

1. Klik in de sectie die je wil kopiëren

2. Klik op de drie puntjes in het menu

3. Kies Copy section

Kopiëren en plakken

Foto toevoegen

Je plaatst een foto of afbeelding door via de sidebar te kiezen voor Image of Gallery. Er wordt dan door Hostinger een afbeeling geplaatst, die je zelf moet wijzigen.

Afbeelding wijzigen

1. Selecteer de afbeelding

2. Kies Edit image

3. Kies Replace image

Galerij wijzigen

Via Edit gallery bepaal je hoeveel afbeeldingen je op een rij wil zetten.
De inhoud wijzig je zo:

1. Klik op de galerij

2. Kies Manage gallery

3. Selecteer foto's en bepaal de volgorde waarin ze worden geplaatst

Media toevoegen

Alt text

De alt text is belangrijk voor zoekmachines zoals Google. Google 'ziet' niets, maar 'leest' wel. De alt text helpt algoritmes bij het beoordelen van de pagina-inhoud.

❗️De alt text wordt ook voorgelezen aan bijvoorbeeld slechtzienden.

Alt text invullen

1. Open de mediabibliotheek via de sidebar

2. Selecteer afbeelding en klik op Details

3. Geef de afbeelding een relevante, beschrijvende, liefst bondige alt text

4. Eindig indien gewenst met de copyrightvermelding © + naam fotograaf

5. Klik op Save

File name

Geef de afbeelding zelf ook een logische naam. Dus niet: IMG_1234, maar bijvoorbeeld: workshop-bloemschikken-hortuspopulus-01.

Video toevoegen

Je plaatst een video door in de sidebar te kiezen voor Video. Er wordt dan door Hostinger een trailer geplaatst, die je zelf moet wijzigen.

❗️De video moet op YouTube of Vimeo staan.

Het is ook mogelijk om een video te uploaden die op Google Drive staat, volg daarvoor deze instructies van Hostinger.

YouTube/Vimeo-video toevoegen

1. Selecteer de trailer

2. Kies Edit video

3. Plak de link naar jouw video in
   de grijze balk

4. Schuif alle toggles naar rechts

5. Klik op het kruisje

Formulier toevoegen

De makkelijkste manier is om een ander formulier te kopiëren en hiervan de details aan te passen. Je plaatst een nieuw formulier via Add element in de sidebar, dit formulier moet je zelf vormgeven.

Details aanpassen

• Klik op het formulier

• Kies Edit form

• Wijzig onder General het onderwerp en klik op Save

• Wijzig het e-mailadres en klik op Save

• Wijzig onder Button eventueel de tekst op de verzendknop

❗️Vergeet niet het mailadres te verifiëren. Je krijgt hiervoor een mail in de inbox.

Formulieren

Forms beheren

Als een bezoeker van de website een formulier verzend, krijg je daarvan bericht in de Hostinger-inbox. Hierin staat in principe alle informatie die je nodig hebt.

Je kunt de ingezonden formulieren beheren door in de mailnotificatie op View Forms te klikken, of je gaat direct naar de No Code Bouwer.

Overzicht van alle formulieren

• Klik in de sidebar op Website settings

• Kies Form submissions

Je ziet hier een overzicht van alle formulieren op de website. De hoeveelheid inzendingen staat aangegeven achter het onderwerp.

• Klik op View list achter een onderwerp

Je ziet hier een overzicht van de berichten die via dit formulier verstuurd zijn. Je kunt deze lijst exporteren of de berichten verwijderen.

Formaat aanpassen

Afbeelding schalen

• Vergroot een afbeelding proportioneel door de hoeken te verslepen

• Door de hendels aan de zijkanten of boven-/onderaan te verslepen, wordt de afbeelding bijgesneden

Afbeelding bijsnijden

Als de afbeelding een ander formaat heeft dan het kader, wordt de afbeelding bijgesneden. Je kunt binnen het kader de afbeelding verslepen en in- of uitzoomen.

1. Klik op de afbeelding

2. Kies in het menu voor Crop and position

3. Versleep, vergroot of verklein

4. Klik op Done

Proporties herstellen

1. Klik op de afbeelding

2. Klik op de drie puntjes in het menu

3. Kies Reset image proportions

Tekstkader

Tekstkaders worden alleen smaller of breder gemaakt. Hiervoor versleep je de hendel aan de linker- of rechterkant van het kader.

❗️Zet een tekstkader niet breder dan 4-5 kolommen. Lange zinnen lezen niet prettig en worden daarom sneller genegeerd.

Formaten en schalen

Tekststijlen

Voor de hele website zijn tekst-stijlen ingesteld. Deze stijlen bepalen het lettertype, de grootte en het gewicht van een tekst.

Kleur

Tekst is automatisch zwart. Je geeft tekst een kleur door het woord of de zin te selecteren en in het menu een tekstkleur toe te wijzen.
❗️Beperk je tot de kleuren waaruit je kunt kiezen in de bolletjes. Zo houden we de vormgeving consistent en opgeruimd.

Tekst en tabellen

Koppen-hierarchie

Heading 1

❗️Elke pagina begint met de H1 en mag maar één H1 hebben. Pas deze niet zomaar aan, dat kan onze positie in Google beïnvloeden.

Heading 2 tot 6

Een sectie mag met elke heading beginnen. Ook mogen er meerdere H2-H6'en in voorkomen, mits de volgorde constant is of afloopt.

Uitzonderingen

Font size

Soms heb je een Heading nodig die eigenlijk te groot is voor die plek. Je kunt in dat geval in het tekstmenu de fontgrootte aanpassen.

Witregel

Een Enter creëert automatisch een witregel. Deze is niet altijd gewenst.

Witregel aanpassen

1. Klik op het tekstkader

2. Kies in het menu voor Edit text

3. Plaats je muis boven de witregel, die lichtblauw kleurt

4. Houd in de lichtblauwe regel je muis ingedrukt en sleep naar boven om de ruimte te verkleinen

Tabellen

Tabellen plaats je als externe code. Eerst maak je de tabel in deze online tabellen generator.

1. Kies het font: Serif generic, 16px

2. Vul de tabel

3. Klik rechts in het menu op Theme

4. Selecteer een kleurpalet, no borders + horizontal stripes

5. Klik op Generate

6. Klik op Copy to clipboard

Tabel plaatsen

1. Kies in de sidebar voor Embed code

2. Klik op Your custom embed code

3. Kies Enter code

4. Plak de code tussen de html tags

5. Klik op Embed code

Nieuws van het Front

De Nieuws van het Front-pagina heeft twee secties: oude berichten en het nieuwste bericht.

Nieuwste bericht vervangen

1. Sleep de hendel van de sectie boven het nieuwste bericht een stuk naar beneden, ver genoeg om het laatste bericht erbij te zetten

2. Dupliceer de sectie met het nieuwste nieuwsbericht

3. ❗️Blijf bij de sectie boven de kopie

4. Selecter alle elementen en sleep het bericht over de sectiegrens, naar de sectie met oude berichten

5. Positioneer netjes onder de rest

6. Verwijder de sectie die nu leeg is: klik op de achtergrond en kies in het menu voor Delete

7. Vervang de inhoud van de sectie die je eerder dupliceerde

Nieuws van het Front bijwerken

Link naar sectie

De sectie waar het nieuwste bericht in staat heeft een anker-tekst. De link 'Nieuwste bericht' is daaraan gekoppeld.

❗️Controleer online of die link nog werkt nadat je het bericht hebt vervangen. Volg anders deze stappen:

Sectie-anker toevoegen

1. Klik in de sectie met het nieuwste bericht op de achtergrond

2. Kies Edit section

3. Klik op Anchor

4. Schrijf: #nieuwstebericht

5. Druk op enter en klik op het kruisje

Link naar sectie-anker

1. Klik op het tekstkader Nieuwste bericht

2. Kies in het menu voor Link

3. Kies in de drop-down voor Section

4. Selecteer 'nieuwstebericht'

5. Klik op Save

6. Verwijder de onderlijning door in het menu op de U te klikken

Workshops

Op de pagina met workshops staat iedere workshop in een aparte sectie.

Workshop toevoegen

1. Dupliceer de sectie van een workshop

2. De kopie van deze sectie verschijnt onder de gedupliceerde sectie

3. ❗️Vervang de inhoud van de kopie

Workshop verwijderen

1. Klik in de sectie die je wil verwijderen op de achtergrond

2. Kies in het menu voor Delete

Workshop verbergen

1. Klik in de sectie op de achtergrond

2. Kies in het menu voor Hide/Show

3. Schuif de toggle naar links om de sectie te verbergen

Workshops bijwerken

Link naar sectie

De sectie van elke workshop heeft een unieke anker-tekst. De links onder 'aanbod' zijn daaraan gekoppeld. Als je een nieuwe workshop hebt toegevoegd, volg dan deze stappen:

Sectie-anker toevoegen

1. Klik in de sectie van de nieuwe workshop op de achtergrond

2. Kies Edit section

3. Klik op Anchor

4. Schrijf in kleine letters aan elkaar: #denaamvandeworkshop

5. Druk op enter en klik op het kruisje

Link naar sectie-anker

1. Voeg in het tekstkader onder 'aanbod' de nieuwe workshop toe

2. Selecteer de naam van de workshop en het pijltje erachter

3. Kies in het menu voor Link

4. Kies in de drop-down voor Section

5. Selecteer de juiste workshop

6. Klik op Save

7. Verwijder de onderlijning door in het menu op de U te klikken

Link naar anker

Het is mogelijk om secties een anker-tekst te geven. Dit is een unieke tekst waarnaar gelinkt kan worden op een pagina. Dit zorgt ervoor dat je automatisch naar de juiste sectie scrollt, als je op de link klikt.

Sectie-anker toevoegen

1. Klik in de sectie waarnaar je wil linken op de achtergrond

2. Kies Edit section

3. Klik op Anchor

4. Schrijf achter de # de naam van het onderdeel, bijv: bloemschikken, in kleine letters aan elkaar

5. Druk op enter en klik op het kruisje

Link naar sectie-anker

1. Selecteer de tekst waarmee je naar de sectie wil linken

2. Kies in het menu voor Link

3. Kies in de drop-down voor Section

4. Selecteer de juiste ankertekst

5. Zet beide toggles uit

6. Klik op Save

7. Verwijder de onderlijning door in het menu op de U te klikken

Smooth (scroll) links

Toon of verberg

Het is mogelijk om elementen of hele secties te verbergen. Bijvoorbeeld voor bepaalde tijd of omdat er in de mobiele weergave minder ruimte is.

Je ziet dat een element of sectie verborgen is, doordat er een semi-transparante laag met schuine grijze balken overheen staat.

Element verbergen

1. Klik op de afbeelding of het tekstkader dat je wil verbergen

2. Kies in het menu voor Hide/Show

3. Zet de toggle van het apparaat waarop je het element wil verbergen uit

Sectie verbergen

1. Klik in de sectie die je wil verbergen op de achtergrond

2. Kies in het menu voor Hide/Show

3. Zet de toggle van het apparaat waarop je het element wil verbergen uit

Zichtbaarheid

Mobiel

Nadat je de 'gewone,' brede pagina hebt opgemaakt, moet je handmatig ook de mobiele weergave opmaken.

Mobiele versie zien

Klik bovenaan de pagina op het mobiele icoon, naast het icoon van de laptop. Het scherm wordt net zo smal als het scherm van de gemiddelde mobiele telefoon.

Elementen positioneren

De website-bouwer plaatst alle elementen die op de brede pagina voorkomen onder elkaar op de mobiele pagina. Bovenaan alle tekstelementen, daaronder alle beeldelementen en onderaan alle knoppen. Je moet deze elementen zelf netjes positioneren.

Elementen verbergen

Vanwege de beperkte ruimte kun je ervoor kiezen om sommige elementen of hele secties te verbergen op de mobiele weergave. Zie zichtbaarheid.

Mobiele weergave

❗️Let op

Als je de mobiele versie inhoudelijk aanpast, dan verandert dat ook de brede versie. Bijvoorbeeld:

• Een element verwijderen of toevoegen

• Een tekst(stijl) aanpassen

• Een kleur veranderen

• De lagen herschikken

Je kunt uiterlijkheden wél aanpassen, zonder de brede versie te veranderen. Bijvoorbeeld:

• Waar elementen staan

• De grootte van een afbeelding

• Reset image proportions

• Tekstkaders