Inhoud maken (OSB)

Introductie

Een website kan bestaan uit meerdere pagina's, die allemaal geheel naar wens kunnen worden ingericht. De lay-out van deze pagina's bestaat uit secties, die zijn opgebouwd uit kolommen. Je kunt een sectie zien als een container voor de kolommen. Je kunt meerdere secties op een pagina maken en deze secties worden onder elkaar geplaatst. Voor inhoud die je naast elkaar wilt plaatsen, kunt je kolommen gebruiken. Elke sectie kan in totaal 12 kolommen bevatten. Om je hierbij te helpen, kun je bepaalde lay-outs kiezen. Deze worden visueel weergegeven om je een idee te geven van hoe de dingen eruit zullen zien.

Site → pagina's → secties → kolom(men) → widget(s)

Goed om te weten: zodra je in de instellingen (en op veel andere plaatsen) begint te werken, verschijnen er [i]-pictogrammen die je door het proces helpen en uitleggen wat alles doet.

Een pagina maken

Om een nieuwe pagina aan te maken, gaat je naar de sectie "Pagina's" van het CMS en klikt je op het "Plus-pictogram" (1) of op de knop "Nieuwe pagina toevoegen +" (2)

Wanneer je op een van deze knoppen hebt geklikt, krijgt je een pop-up venster waarin om een paginatitel wordt gevraagd:

1. De pagina titel, deze kun je later altijd nog wijzigen via page settings

2. De pagina-URL wordt automatisch gegenereerd, maar je kunt deze wijzigen als je dat wilt

3. Met de knop "Pagina toevoegen" wordt de pagina gemaakt en wordt je ernaar doorverwezen.

Sorteren en ordenen van de website navigatie

Uw website heeft rechtsboven een navigatiemenu, waardoor gebruikers gemakkelijk door de website kunnen navigeren. Door pagina's te slepen en neer te zetten, kunt je de structuur van dit navigatiemenu vormen.

Klik, houd vast en sleep een pagina om deze als een "onderliggende" pagina aan een andere toe te voegen, of om de volgorde van pagina's te wijzigen.

Speciale pagina's & snelle acties

1. Startpagina, een speciale pagina, zoals die altijd zal bestaan, en de standaardpagina zijn waar mensen terechtkomen wanneer ze de URL van de site invoeren. Je kunt de publicatie niet verwijderen en de publicatie ervan ook niet ongedaan maken.

2. Vacatures, nog een speciale, want die zal altijd bestaan, hier verwachten we dat je de je belangrijkste vacatures hebt.

3. De snelle acties voor pagina's

   1. "Prullenbak pictogram" > Als je deze pagina verwijdert, wordt deze en de inhoud ervan permanent verwijderd

   2. "Plus-pictogram" > Voeg een nieuwe pagina toe onder deze

   3. "Oog pictogram" > Schakel de publicatie van deze pagina in door er simpelweg op te klikken

Paginastructuur

Wanneer je een pagina opent, is het eerste wat je ziet de structuur, je krijgt een snel overzicht van welke secties, kolommen en widgets er op deze pagina staan. Je kunt de volgorde van secties en widgets wijzigen, nieuwe secties en widgets toevoegen en secties en widgets verwijderen.

Pagina-instellingen

Wanneer je overschakelt naar het tabblad "Instellingen" kunt je dingen over de pagina wijzigen, zoals titel, url, navigatiegedrag en seo-gerelateerde instellingen

1. Titel (de titel van de pagina)

2. URL (De url waarop het kan worden bezocht)

3. Gebruik een externe URL (U kunt een andere URL gebruiken voor deze pagina, bezoekers omleiden naar een andere website)

4. Verbergen in navigatie (De pagina wordt niet weergegeven in de navigatiebalk)

5. Blokkeren voor indexering (Blokkeren van zoekmachines zoals Google van het indexeren van deze pagina)

6. Meta description (De korte beschrijving van een pagina voor de resultaten van zoekmachines)

7. Meta keywords (door komma's gescheiden zoekwoorden, die zoekmachines vertellen waar deze pagina over gaat)

8. OG Image (een afbeelding van 1200×629 die wordt getoond bij het delen van deze pagina)

Sectie opties

Wanneer je zich in de editor van een pagina bevindt, kunt je een sectie toevoegen door op de grote knop 'Nieuwe sectie toevoegen' te klikken of door op het plus pictogram (+) boven een bestaande sectie te klikken. Bij het toevoegen van een sectie kun je kiezen uit verschillende lay-outs. Elke lay-out vertegenwoordigt een specifieke kolomstructuur. Afhankelijk van hoe je de inhoud wilt ordenen, kiest je de gewenste lay-out. Als je bijvoorbeeld twee teksten gelijkmatig naast elkaar wilt plaatsen, kies je voor een 6/6 structuur.

Bij het maken van een sectie kunt je kiezen uit de volgende sectielayouts:

Sectie configuratie

Elke sectie kan worden geconfigureerd om anders te worden weergegeven. Hoeveel ruimte binnen of buiten moet er zijn? Welke achtergrond- en tekstkleur wilt u, hoe moeten meerdere kolommen horizontaal worden uitgelijnd?

U kunt de configuratie van een sectie bewerken door op het "tandwiel" icoon in de paginastructuur te klikken:

Als je op dit pictogram klikt, gaat je naar de configuratie van deze sectie, en dat ziet er ongeveer zo uit.

• Volledige breedte (standaard uitgeschakeld)

  • Uitgeschakeld: De kolom(men) van deze sectie bevinden zich in een onzichtbare container

  • Ingeschakeld: de kolom(men) van deze sectie nemen de volledige breedte van de pagina in beslag

• Gecentreerde inhoud (standaard uitgeschakeld)

  • Uitgeschakeld: De kolommen zijn horizontaal uitgelijnd met de bovenkant van de sectie

  • Ingeschakeld: De kolommen zijn horizontaal gecentreerd op basis van elkaars breedte

• Achtergrondkleur: De kleur van de achtergrond van de sectie, zorg ervoor dat deze contrasteert met de tekst

• Tekstkleur: De kleur van de tekst in de sectie, zorg ervoor dat deze contrasteert met de achtergrond

• Ruimte buiten: De hoeveelheid ruimte die een sectie zowel erboven als eronder zal maken

• Ruimte binnenin: De hoeveelheid ruimte die een sectie in zichzelf zal maken (boven en onder)

Widgets

Wanneer je een widget gaat toevoegen aan de kolom van een sectie, krijgt je deze pop-up te zien. En je kiest welke widget je wilt.

Neem een kijkje op de widgets pagina om meer te weten te komen over deze widgets.

De teksteditor

Sommige van de widgets stellen je in staat om geformatteerde inhoud te schrijven, met behulp van een zogenaamde: "WYSIWYG Editor (What you see is what you get editor)"

Met deze editor kunt je teksten schrijven en veel gebruikte formaat opties voor het web gebruiken. Het bevat ook de OTYS Ai Assistant, die je helpt bij het (her)schrijven van content en vertalen.

De basis, wat zijn alle opties

Hieronder een korte uitleg van de verschillende mogelijkheden

1. Koppen: Koppen helpen je om beter leesbare inhoud te maken en verbeteren de SEO

2. Lettertype Stijl: Tekst markeren door een vette, cursieve of onderstreepte stijl toe te passen

3. Lijsten: Maak lijsten met of zonder nummering

4. Citaat: Voegt een achtergrond toe aan een citaat

5. Tekst uitlijnen: opties zijn: links, midden, rechts en uitrekken

6. De inspringing van alinea's of lijsten vergroten/verkleinen

7. Formaat verwijderen: Soms, wanneer je tekst kopieert/plakt, heeft deze ongewenste opmaak

8. Voeg een link/verwijzing toe naar een andere pagina, hiermee kun je ook een knop maken

9. De AI-assistant, bekijk de onderstaande gids over hoe het werkt.

De Ai-assistant

De OTYS Ai Assistant, zoals je die misschien al kent in OTYS Go! Helpt je bij het schrijven, herschrijven, formatteren, vertalen en meer.

Als er al tekst in de teksteditor staat, zijn de prompts van toepassing op die tekst, als er nog geen tekst is, kun je de assistent vragen om wat voor je te schrijven.

1. De AAN/UIT-schakelaar: Open of sluit de assistent

2. Snelle invoer: Schrijf je eigen aanwijzingen om de assistent te vertellen wat hij moet doen.

3. Maandelijks tokengebruik: houd bij hoeveel tokens je hebt gebruikt door de muisaanwijzer op het percentage te plaatsen

4. Verzenden: Als je klaar bent met het schrijven van een prompt, ‘‘stuur’’ je deze naar de assistent.

5. Snelle acties: deze suggesties worden contextueel gedaan en helpen je bij het uitvoeren van acties zonder een eigen prompt te schrijven

Apparaatspecifieke instellingen

Sommige widgets hebben speciale instellingen/ingangen waarmee je een andere waarde kunt gebruiken op desktop, tablet en telefoon.

Wanneer je schakelt tussen apparaten voor de voorbeeldmodus, zullen sommige instellingen/ingangen ook veranderen, je kunt ze herkennen aan hetzelfde apparaat pictogram als waar je momenteel een voorbeeld van bekijkt.

Hieronder een voorbeeld van de instelling "Beeldverhouding" in de widget "Kopteksten", omdat je misschien een andere beeldverhouding op verschillende schermformaten wilt hebben

1. De schakelaar van het apparaat

2. De invoer, met dat extra pictogram dat overeenkomt met het huidige preview apparaat

Inhoud vertalen

Misschien wilt je een zogenaamde "meertalige" website hebben, zodat gebruikers van verschillende nationaliteiten de website kunnen bezoeken en inhoud in hun eigen taal kunnen lezen.

In het configuratie gedeelte van het CMS kun je kiezen welke talen je op je website wilt publiceren, de lijst met mogelijke talen is gebaseerd op je OTYS Go! systeem. Als je hier meer talen wilt, moet je contact opnemen met OTYS-ondersteuning, houd er rekening mee dat we de inhoudstalen die je in Go hebt! En dat je ook vacatures in die talen moet laten publiceren en schrijven.

Met behulp van de vlag aan de rechterkant in de bovenbalk van het CMS kun je schakelen tussen talen en de huidige pagina in een andere taal vertalen. Merk op dat pagina's dezelfde lay-out, structuur en widgets hebben, het vertalen van een pagina is alleen het vertalen van bepaalde velden in widgets. Het is dus niet mogelijk om verschillende widgets op dezelfde pagina in een andere taal te hebben. Lees de voorbeeldsituatie hieronder om volledig te begrijpen hoe het werkt:

Het concept uitgelegd met een voorbeeldsituatie:
Jouw OTYS Go! De standaardtaal van de omgeving is Engels, en je hebt een mooie website in de Engelse taal gemaakt en je hebt je nog geen zorgen gemaakt over het ondersteunen van meerdere talen. Nu ben je klaar om te vertalen, dus je gaat overschakelen naar de Nederlandse omgeving, want je zult dan zien dat de Engelse pagina daar volledig is en alle waarden er automatisch zijn, en je kunt ze gewoon vervangen door een Nederlandse vertaling en opslaan.

Om het vertalen gemakkelijker te maken, hebben we besloten welke velden kunnen worden vertaald en welke niet. Je herkent ze aan dit icoontje: (1)
Zoals je hieronder kunt zien, hebben we besloten dat je voor deze widget voor het overzicht van medewerkers waarschijnlijk alleen de titel van de widget en de functie van de medewerker wilt vertalen. Andere velden zoals telefoonnummer, naam, linkedin en mail blijven in alle talen hetzelfde.

Houd er rekening mee dat de AI-assistent gemakkelijk inhoud voor je kan vertalen!

Media galerij

Elke website zal afbeeldingen en video's bevatten. Met de mediakiezer kun je deze bestanden en meer ordenen! De galerij wordt automatisch geopend wanneer je op een afbeelding klikt.

Hieronder een impressie van hoe de mediagalerij eruit ziet

1. Het mapmenu, klik op een map om daarheen te gaan

2. Met het "Plus-pictogram" kun je een nieuwe map maken

3. Upload bestanden door op deze knop te klikken of sleep ze naar de mediagalerij

4. Als je een media-item hebt geselecteerd, kun je deze knop gebruiken om het te selecteren en te gebruiken.

5. Het "X-pictogram" sluit de galerij en verwijdert de selectie

Het contextmenu van het item

Wanneer je met de rechtermuisknop op een van de geüploade items klikt, of klikt op de "Stippen ... pictogram" op een item kunt plaatsen, kun je het contextmenu openen en de volgende acties uitvoeren

1. Als je een item verwijdert, zal dit het item zeker verwijderen. Dit kan alleen als het nergens meer wordt gebruikt

2. Open, dit gaat naar de details van het media-item, waar je de naam, alt-tekst, brandpunt kunt wijzigen en kunt zien waar het wordt gebruikt.

3. Verplaats naar map, als je het beter wilt organiseren, en verplaats dit item dus naar een andere map die mogelijk is om

Een bestaand media-item bijwerken

Als je een afbeelding of video hebt geüpload, kun je de details openen door op de naam van het item in de lijst te klikken.

In dit detail kun je verschillende wijzigingen aanbrengen, hieronder worden ze uitgelegd:

1. De naam van het item, dit verschijnt niet op de website, maar kan handig zijn voor het organiseren van verschillende media-items

2. De alternatieve tekst, de "ALT"-tekst, wordt aan de gebruiker getoond wanneer de bron niet op de website kan worden geladen, en wordt door zoekmachines gebruikt om te begrijpen waar de inhoud over gaat

3. Datum maken, wanneer dit item voor het eerst is geüpload in het CMS

4. Laatst bijgewerkt, wanneer je wijzigingen aanbrengt, wordt deze datum gewijzigd

5. Aansluitingen, zie precies waar dit item is gebruikt, dit kan handig zijn als je het wilt verwijderen, zodat je weet wat er aan de hand is

6. Open in een nieuw tabblad, bekijk snel de bron in een nieuw browsertabblad

7. Een zeer nuttige manier om ons systeem te vertellen wat het belangrijkste "onderwerp" in het item is, zodat we ervoor kunnen zorgen dat we het in het oog houden wanneer het item wordt bijgesneden. Lees hier onder meer

8. De knop Wijzigingen opslaan, om eventuele mutaties op te slaan die je hebt aangebracht

Media-item "Aandachtspunt"

Een veel voorkomende frustratie is dat je dezelfde afbeelding of video in verschillende "formaten" op de website moet uploaden. Het kan dus op meerdere plekken en in meerdere beeldverhoudingen worden gebruikt
We kunnen dit gedeeltelijk oplossen, door dit "Focuspunt" in te stellen, en ons systeem te vertellen wat het onderwerp van de afbeelding of video is. We zullen er dan voor zorgen dat als we delen van het item bijsnijden het onderwerp toch in beeld is.

Om dit concept uit te leggen, zullen we het uitbreiden met een voorbeeld van deze video van Amsterdam. Deze video is veel 'groter' dan de ruimte die we ervoor hebben. De video heeft een beeldverhouding van 16:9, maar in de header wordt deze teruggebracht tot 7:1.

Zoals je kunt zien, is het brandpunt standaard ingesteld op het midden van de video, waarbij het wordt bijgesneden om daar scherp te stellen. Als we het nu gebruiken in een Header met een beeldverhouding van 7/1. De boven- en onderkant worden afgesneden. In dit geval denk ik echter dat het bovenste deel van de video veel mooier is dan het midden, en ik wil dat de focus op de kerk op de achtergrond ligt. Dus laten we het "Brandpunt" / "Onderwerp" naar boven veranderen. Je kunt dit doen in het gedeelte 'media' door de blauwe stip op de video te verplaatsen.

Als we het nu opnieuw laden en de beeldverhouding een groot deel van de video afsnijdt, kun je zien dat het brandpunt is verplaatst waar we de video op je pagina bijsnijden. Op deze manier kunt je eenvoudig video headers toevoegen zonder dat je hoeft bij te snijden in een andere software, of rommellen met de video-instellingen.

Probleemoplossing

Als je vragen heeft die niet kunnen worden opgelost met behulp van de helpdesk, de rondleiding door de sitebouwer of de individuele informatiepictogrammen, neem dan contact met ons op door een support ticket te openen.