How to

2. Samenwerken met meerdere gebruikers 👥

‍De Editor stelt meerdere personen in staat om tegelijkertijd statische en dynamische content te bewerken.

Er kunnen meerdere personen tegelijkertijd in de Editor werken. Als twee mensen tegelijkertijd dezelfde content bewerken, geldt dat de laatste wijzigingen worden doorgevoerd, dus het is nog steeds belangrijk om de bewerkingstijden met je teamgenoten te bespreken.

Als jij of je team een foutmelding zien bij het inloggen in de Editor, probeer dan een van de volgende oplossingen:

• Controleer of je browser cookies accepteert, en schakel dit in als dat niet het geval is.
• Log uit de Editor, wis de cache van je browser en log opnieuw in.
• Log in op de Editor via een incognitovenster.
• Probeer in te loggen via een andere browser.
• Stuur een nieuwe uitnodiging naar je content Editor en vraag hen om een incognitovenster te gebruiken om hun nieuwe account aan te maken.

Als geen van deze oplossingen werkt, neem dan contact op met mij via hi@zweihander.nl

3. De Toolbar 🍫

Wanneer je de Editor opent, zie je je live website met de Editor toolbar (de grijze balk) samengevouwen onderaan je scherm. Via deze werkbalk kun je verschillende Editor-panelen openen om de pagina-instellingen, dynamische inhoud of collecties, formulieren en je Editor-account te beheren. Je kunt ook je wijzigingen bekijken en publiceren via de Editor.

Verlaat je je website eventjes en kom je later terug? Dan zal je waarschijnlijk een button zien met potlood pictogram en ‘Edit site’ rechts onderin, hier kan je op klikken om je website weer te editten.

Geen zorgen, alleen degene met toegang tot de website kunnen dit pictogram zien 😉

De Editor werkbalk heeft de volgende tabbladen en pictogrammen:

• Menu - Gebruik dit menu om naar het Dashboard, je Projectinstellingen of de Designer te gaan. Deze knop heeft het Webflow-logo, dat je kunt vervangen door je eigen logo of dat van je klant in ons Pro-abonnement.
• Pages - opent het Pagina’s Paneel, waarin je alle statische pagina’s en dynamische Collectiepagina’s van je site ziet. Hier kun je navigeren naar een pagina, deze live bekijken en de instellingen van elke pagina beheren.
• Collections - opent het Collections Paneel, waarin al je Collecties worden weergegeven. Als je op een Collectie klikt, opent een nieuw tabblad in de werkbalk waarin alle items in die Collectie worden getoond. Hier kun je elk item bewerken of nieuwe items aanmaken. Zie "Content-CMS Maken en Beheren" voor meer informatie.
• Forms - opent het Formulieren Paneel waar je inzendingen van formulieren op de site kunt bekijken en downloaden.
• Accountinstellingen (tandwielpictogram) - opent het Accountinstellingen Paneel, waar je de gegevens van je Collaborator-account kunt bewerken en een profielfoto kunt uploaden. Cute!
• Hulp & Ondersteuning (reddingsboei pictogram) - opent het Hulp en Ondersteuning Paneel, waar je antwoorden kunt vinden op veelgestelde vragen over het gebruik van de Editor.
• Uitloggen (halve cirkel/pijl pictogram) - logt je na bevestiging uit de Editor.
• Saving/Saved - alle wijzigingen worden automatisch opgeslagen in de Editor. “Saving…” / “Saved” status onderaan geeft dit aan.
• Changelog - dit toont het aantal niet-gepubliceerde wijzigingen naast de publiceerknop onderaan links. Door op de changelog te klikken, zie je een lijst van items en pagina’s met niet-gepubliceerde wijzigingen, en kun je zien welke Collaborator ze heeft gemaakt.
• Back to live site (knop) — Schakelt van de Editor-modus naar Live-site modus, zodat je je site kunt bekijken zoals bezoekers die zien.
• Publish (knop) - hiermee kun je alle wijzigingen die je in de Editor hebt gemaakt, publiceren. Vergeet niet dat er niets live gaat totdat je op de publiceerknop drukt.

4. ‘Live’ Editing / On-page editing 📝

Tekst bewerken is zo makkelijk en gebruiksvriendelijk met de Editor. Dit werkt eigenlijk hetzelfde als in een text editor zoals Microsoft Word of Apple Pages.

Wanneer je over bewerkbare tekstelementen beweegt, zie je een lichtgrijze omlijning rond het tekstelement en een potloodpictogram in de rechterbovenhoek. Je kunt de tekst bewerken door in het vak te klikken.

‍

‍

‍

4.1 Tekst opmaken

Je kunt woorden of zinnen ook vet of cursief maken, een link toevoegen of opmaak verwijderen door ze te selecteren en de gewenste opmaak te kiezen in de werkbalk die verschijnt.

‍

4.2 Rich Text Elements - bijvoorbeeld in een blog of lang bericht

Een 'Rich Text'-element is een content blok waar je veel meer tekst in kwijt kan. Dit wordt vaak gebruikt bij bijvoorbeeld een blog, project of pagina's met langere stukken tekst. Hier kan je meer mee doen: media en foto's toevoegen, lijsten maken, en je tekst verder stijlen en opmaken.

Om tekst te stijlen, selecteert je deze. Er verschijnt dan een grijze balk met de volgende opties:

• B voor bold
• I voor italics
• Ketting link icon om een link toe te voegen
• H1-H6 om de verschillende niveaus van titels te creëren.
  Het getal geeft het belang van elke kop aan, waarbij H1 het belangrijkst is en H6 het minst belangrijk. Houd er rekening mee dat de meeste pagina's maar één H1 hebben, dus die zal je niet vaak gebruiken.
• “ Om een ​​quote te maken.

‍

Vergeet niet om je wijzigingen te publiceren zodat ze live gaan.

4.3 Heading Structuur: H1 t/m H6

Wat zijn Headings?

Headings zijn kopteksten (H1 t/m H6) die de structuur van een webpagina aangeven. Ze helpen zowel bezoekers als zoekmachines om de inhoud van je pagina beter te begrijpen.

Waarom zijn Headings belangrijk?

1. SEO (Zoekmachineoptimalisatie):
   Zoekmachines gebruiken headings om de inhoud van een pagina te begrijpen. De H1 is de belangrijkste kop en moet het belangrijkste onderwerp van de pagina weergeven. Gebruik relevante zoekwoorden in je headings om je pagina beter vindbaar te maken.
2. Gebruikerservaring:
   Headings maken de inhoud van je pagina overzichtelijker en makkelijker te scannen voor bezoekers. Een duidelijke structuur met koppen en subkoppen helpt mensen sneller de informatie te vinden die ze zoeken.

De verschillende niveaus van Headings:

• H1: De hoofdtitel van de pagina. Er mag maar één H1 zijn per pagina.
• H2: Belangrijke subkoppen die de hoofdsecties van de pagina aangeven.
• H3: Subsecties van H2, voor verdere details binnen een sectie.
• H4 - H6: Minder vaak gebruikt, voor verdere verdeling van inhoud als dat nodig is.

Best Practices:

• Volgorde: Gebruik de headings in de juiste volgorde (H1 > H2 > H3, etc.).
• Consistentie: Houd de heading structuur consistent op alle pagina’s.
• Duidelijkheid: Schrijf duidelijke en beschrijvende headings die de inhoud goed weergeven

Voorbeeld van een goede Heading Structuur:

‍H1: Grafisch ontwerp met impact

• H2: Onze Diensten in Grafisch Ontwerp‍
  • H3: Visuele Identiteit & Huisstijl
  • ‍H3: Print & Promotiemateriaal
  • ‍H3: Website en Digitale Ontwerpen

• H2: Ons Ontwerpproces‍
  • H3: Van Concept tot Realisatie
  • ‍H3: Samenwerking en Feedback

• H2: Waarom Vrij in Vorm?‍
  • H3: Creativiteit met Impact
  • ‍H3: Flexibiliteit en Maatwerk
  • ‍H3: Betrouwbaarheid en Snelheid

Door een logische heading structuur te volgen, verbeter je zowel de SEO als de leesbaarheid van je pagina’s, wat zorgt voor een betere ervaring voor zowel bezoekers als zoekmachines.

5. Afbeeldingen vervangen 🏞️

Je kunt ook afbeeldingen direct op de site vervangen. Beweeg je cursor over de afbeelding die je wilt vervangen en klik vervolgens op het pictogram van de afbeelding. Hierdoor kun je een nieuwe afbeelding vanaf je computer selecteren en uploaden.

‍

TIPS!

Optimaliseer Afbeeldingen:

• Gebruik afbeeldingen met een hoge resolutie maar vermijd te grote bestanden om laadtijden te optimaliseren. Voer ze eerst in https://tinypng.com om je bestandsgrootte kleiner te maken.
• Worden afbeeldingen direct in assets gezet? Dan kan je de afbeelding selecteren en kiezen voor 'Compress'
  

Alt-tekst voor Afbeeldingen‍

• Zorg ervoor dat elke afbeelding een alt-tekst heeft om zoekmachines te helpen de inhoud van de afbeelding te begrijpen en de toegankelijkheid te verbeteren.
• Voer de alt-tekst in via de Image Settings in de Editor.

‍

6. Buttons & Links aanpassen 🔗

Een button aanpassen is ook appeltje-eitje. Om een knop te bewerken, beweeg je je cursor over de knop en klik je op het Instellingen-pictogram dat in de rechterbovenhoek verschijnt. Hier kan je de link settings aanpassen of de link tekst. Schrijf pakkende button teksten, die actie ondernemen.

‍

Je ziet twee opties:

1. ‍Linkinstellingen bewerken
   ‍Hiermee kun je de link van de knop bijwerken.
   
   Wanneer je een link wilt toevoegen, voert de werkbalk standaard een URL in om naar te linken, maar als je op het linkpictogram aan de linkerkant klikt, kan je uit verschillende andere opties kiezen:
   • Extern: linkt naar een andere pagina op internet, maar je kunt dit ook gebruiken om door te linken naar een andere pagina van je eigen site.
   • Page: linkt naar een andere pagina van je site. Je ziet hier een vervolgkeuzelijst met jouw pagina's.
   • Section: koppelt een gebruiker aan een andere sectie van dezelfde pagina die ze bekijken. Ook hier zie je een vervolgkeuzelijst met de secties van je pagina.
   • E-mail: koppelt een gebruiker aan zijn standaard e-mailapp, zodat hij een e-mail kan schrijven naar het opgegeven e-mailadres.
   • Tel: hiermee kan een gebruiker automatisch naar het aangegeven telefoonnummer bellen. Dit is vooral handig voor mensen die de site bezoeken vanaf een mobieltje.
2. Tekst bewerken - Hiermee kun je de tekst van de knop aanpassen
   

‍

‍

7. Statische Pagina’s & Collections 📃 📚

7.1 Wat is een CMS?

CMS staat voor Content Management Systeem, en zoals de naam al aangeeft, is het een systeem voor het beheren van de inhoud van je website. Dit kan een verzameling zijn van blogposts, teamleden, vacatures—alles wat je maar wilt.

• Statische pagina's:
  Statische Pagina’s kun je ook wel de ‘vaste’ pagina’s noemen. Dit kan je ook zien als eenmalige pagina’s, zoals de Homepage, Over ons, Contact, overzicht pagina’s, enz.
• Collections:
  Dit zijn dynamische pagina’s en worden vermeld met hun collectienaam, zoals: Projecten.. Dit zijn pagina's die worden gegenereerd vanuit je collecties, zoals een verzameling blogposts, teamleden, projecten—alles wat je maar wilt.

Webflow's "visuele" content management systeem maakt het mogelijk voor "niet-technische" mensen om hun websites te onderhouden en nieuwe content te publiceren binnen een consistent ontwerp.

7.2 Dynamische content maken en beheren

Als je Collections in je project hebt, kun je er toegang toe krijgen in de Editor via het Collections-tabblad. Het Collections Paneel toont ze allemaal.

Wanneer je op een collectie klikt, opent er een nieuw tabblad met de naam van de collectie. Dit tabblad bevat alle items binnen die collectie.

EDIT PER KLANT: Hier kun je meer specifiek zijn over de collecties van je klant die op de site staan. Je kunt ook meer specifieke foto’s gebruiken of zelfs een video maken.

‍

7.3 Dynamische content maken en beheren

Je kunt bestaande items bewerken door erop te klikken of nieuwe items maken door op de knop [+ New *collectie-item*] te klikken en de verschillende velden in te vullen die door je zijn ingesteld.

‍

Als je klaar bent met het invoeren van content of het bijwerken van velden, kun je kiezen om:

• Create. Een nieuw item te maken of een bestaand item op te slaan. Het zal worden klaargezet om gepubliceerd te worden en zal live gaan op je site de volgende keer dat je publiceert.
• Publish. Je item meteen te publiceren (zonder te wachten op de volgende site-brede publicatie).
• Save as draft. Opslaan als concept als je nog niet klaar bent om het item op de live site te zetten.
• Cancel. Annuleren om wijzigingen ongedaan te maken.

‍

Je kunt de pagina voor dat collectie-item bekijken door op het pictogram rechts van de itemnaam te klikken. Hierdoor worden de panelen samengevouwen en zie je de pagina voor het item dat je momenteel bekijkt direct in de browser. Als je wilt, kun je het daar bewerken in plaats van in het paneel.

‍

Om terug te gaan naar de lijst met collectie-items, klik je op de Terug [←] knop.

‍

7.4 Content beheren

In het Collecties Paneel kun je al je collectie-items en hun statussen zien. Je kunt meerdere items tegelijk verwijderen, archiveren of de status ervan wijzigen.

Om dat te doen:

• Klik op de [✓Select...] knop.
• Selecteer de items die je wilt beheren.
• Kies de actie die je wilt uitvoeren in de werkbalk bovenaan.

‍

‍

Om het Collectie-tabblad te sluiten, klik je op de sluit [x] knop in de rechterbovenhoek van het tabblad.

‍

10. Pagina (SEO) settings 🛠

10.1. Pagina-instellingen Beheren

Binnen het Pagina's Paneel in de Editor kun je belangrijke pagina-instellingen beheren, zoals de SEO metatitel en beschrijving. Je kunt ook instellingen voor wachtwoordbeveiliging beheren voor statische pagina's.

Om toegang te krijgen tot de instellingen van een pagina:

• Open het Pages tabblad in het Editor paneel.
• Beweeg je cursor over een pagina in de lijst.
• Klik op de [⚙️ Setttings]-knop die verschijnt.

‍

‍

10.2. SEO-instellingen

SEO staat voor “search engine optimization” (zoekmachineoptimalisatie). Hiermee vergroot je de kans dat je pagina’s worden gevonden via zoekmachines zoals Google, Bing, enz. In de instellingen van elke pagina kun je de volgende pagina-specifieke SEO-instellingen maken en bewerken:

• Metatitel: De titel van een pagina speelt een zeer belangrijke rol in de zichtbaarheid en prestaties in zoekmachines, omdat het a) zoekmachines vertelt waar de pagina over gaat en
  b) hetgene is waarop gebruikers van zoekmachines klikken om je site te bereiken.
  Zorg ervoor dat je de soorten woorden opneemt die mensen gebruiken om je bedrijf te beschrijven in de titel. Idealiter zou de titel van een pagina ongeveer 55 tot 60 tekens lang moeten zijn.
  
  
• Metabeschrijving: De beschrijving stelt je in staat om wat meer details over je pagina toe te voegen (ongeveer 150 tekens). Het is belangrijk voor zoekopdrachten, maar niet zo belangrijk als de titel. De sectie Search Result Preview toont je hoe de inhoud die je hebt ingevoerd eruit zal zien op een Google-zoekresultatenpagina. Als een deel van je tekst wordt afgebroken in de preview, is het slim om je tekst in te korten om deze passend te maken.
  
  Dit wordt meestal ingesteld door mij, maar je kunt het aanpassen zodat het beter aansluit bij jullie.
  

Voorbeeld titel & beschrijving:

‍Metatitel: Preventieve Tandheelkundige Zorg | Tandartspraktijk Katendrecht

Metabeschrijving: Preventieve tandheelkundige zorg bij Tandartspraktijk Katendrecht. Van regelmatige controles tot professionele gebitsreiniging, wij helpen je om je mondgezondheid optimaal te behouden. Maak vandaag nog een afspraak.

‍Toelichting:

• Metatitel: Bevat het belangrijkste zoekwoord (Preventieve Tandheelkundige Zorg) en de naam van de praktijk voor herkenbaarheid.
• Metabeschrijving: Samenvatting van de belangrijkste diensten (controles, reiniging, mondhygiëneadvies) en een duidelijke call-to-action (Maak vandaag nog een afspraak!).

‍

10.3 Open Graph (OG) instellingen

Open Graph-instellingen lijken bijna hetzeflde op SEO-instellingen, behalve dat ze worden gebruikt door sociale netwerken zoals Facebook, Twitter en LinkedIn.

In de meeste gevallen kun je gewoon het selectievakje aanvinken om dezelfde inhoud te gebruiken als je SEO-titel en beschrijving. Maar je kunt het ook aanpassen.

Door de Open Graph-instellingen van je pagina's in te stellen, kun je specificeren welke informatie van je pagina's je wilt tonen wanneer iemand je pagina deelt.

‍

‍

Je kunt ook naar pagina's zoeken op naam met behulp van de zoekbalk.

Tips voor SEO

• Consistentie: Zorg ervoor dat alle meta titels en beschrijvingen consistent zijn en de belangrijkste zoekwoorden bevatten.
• Unieke Titels en Beschrijvingen: Elk van je pagina’s moet een unieke meta titel en beschrijving hebben om duplicaatinhoud te voorkomen.

‍

11. Wijzigingen bekijken en publiceren 🕵🏻♂️

Na het aanbrengen van al deze wijzigingen wil je ze bekijken, ervoor zorgen dat ze zijn opgeslagen en klaar zijn om te worden gepubliceerd voordat je op [Publish] klikt.

De wijzigingen die in de Editor zijn aangebracht, worden niet doorgevoerd op de live site totdat je de bewerkte item(s) afzonderlijk publiceert of op de [Publish]-knop drukt om alle klaargezette wijzigingen te publiceren. Heb je het gepubliceerd? Dan laat de groene knop “Published” zien dat je alle wijzigingen hebt gepubliceerd.

‍

‍

Wijzigingen bekijken op de live site

Tijdens het werken in de Editor bedekt het Editor-paneel een groot deel van je website. Om het Editor-paneel in te klappen en je website te bekijken, klik je op de knop "Bekijk Site" bovenaan.

12. Account instellingen ️🤖

Op dit tabje van de editor kun je je account aanpassen. Hier kun je je profielfoto en naam wijzigen. Cute! 🥰

13. Oeps! Een foutje gemaakt? 😱

Ik heb de website verpest, wat nu? Vanuit het onderste menu kun je naar de projectinstellingen gaan en vervolgens toegang krijgen tot de back-ups om de site terug te zetten naar een eerder gepubliceerde versie.
Klik op projectinstellingen in het menu om toegang te krijgen tot back-ups.

Klik op herstellen bij de versie van de site waarnaar je wilt terugkeren.

‍

14. Hulp & Support 🚨

Zoals je kunt zien staan op dit tab van de editor heel veel items met vragen. Het is een FAQ met een hoop antwoorden wanneer je er niet uit komt terwijl je bezig bent met het plaatsen van een blogpost, het publiceren van je aanpassingen of bijvoorbeeld uitloggen.

Ready to go! 🚀

Dit is in grote lijnen de Webflow CMS (Editor), zonder poespas en daardoor heel gebruiksvriendelijk.
Kom je er toch echt niet uit, aarzel dan niet en neem contact met mij op. Dan help ik je graag

Mitchell Leber

• ‍zweihander.nl
• ‍hi@zweihander.nl
• 06 - 13 15 66 65

‍