CMS - Pagina editor

.

Via de pagina editor kan u tekst, afbeeldingen, video’s, selecties … toevoegen aan een pagina, evenement of nieuwsbericht.

 

Klik op de '+' button onderaan om nieuwe blokken toe te voegen aan de pagina.

Hier kan u kiezen om

  • een selectie toe te voegen

  • een groepselectie toe te voegen

  • een (tekst)blok toe te voegen

Om een preview van uw wijzigingen te zien, kan u steeds klikken op ‘Toon pagina’. Dan opent er een nieuw tabblad met een voorvertoning van uw pagina.

Selectie toevoegen

Klik op de optie ‘Selectie toevoegen’. U krijgt vervolgens een overzicht van alle actieve selecties op uw website. Zorg dus dat de selectie die u wilt toevoegen aangemaakt is via de ‘Instellingen’ > ‘Selecties’ (zie ook CMS/WS: Selecties).

Klik vervolgens de selectie aan die u wilt toevoegen (of zoek deze op via het zoekveld) en de selectie is toegevoegd aan de pagina.

Groepselectie toevoegen

Een groepselectie toevoegen aan een pagina werkt op dezelfde wijze als een gewone selectie. Klik op ‘Groepselectie toevoegen’, kies de groepselectie die u wilt toevoegen uit de lijst en de groepselectie wordt toegevoegd aan de pagina.

Vind u de groepselectie niet of hebt u nog geen aangemaakt dan kan dit via de module ‘Homepagina’ (zie ook CMS/WS: Groepselecties ).

Kolommen toevoegen

Wilt u afbeeldingen of tekst toevoegen met een kolommenstructuur? Dan kan dit via de optie ‘Blok toevoegen’. U krijgt hier meteen enkele opties

  • Blok toevoegen (volledige breedte)

  • Blok toevoegen (2 kolommen)

  • Blok toevoegen (3 kolommen)

  • Blok toevoegen (4 kolommen)

Deze tekstblokken volgen het 12 kolommen grid op de website. Wie enige kennis heeft van html, herkent wellicht het 12 grid system van Bootstrap (Grid system ).
Maar u hoeft helemaal geen html cursus te volgen om hiermee te kunnen werken. We proberen het even helder en gevat uit te leggen.

Een de layout van een webpagina is vaak uitgelijnd op een 12 kolommen structuur. Dit maakt het makkelijker om verschillende tekstblokken en afbeeldingen op elkaar af te stemmen.

Een tekstblok die de volledige breedte van het scherm inneemt is in html termen een col-12 tekstblok, want het gebruikt alle 12 kolommen van de structuur. Logischerwijze neemt een col-6 tekstblok de helft van de pagina in beslag, kan u drie keer een col-4 naast elkaar zetten en passen er vier col-3 tekstblokken naast elkaar. Het is geen hogere wiskunde, maar uw rekensom moet steeds gelijk zijn aan 12 (6+6=12, 4+4+4=12, 3+3+3+3=12).

U kan natuurlijk ook tekstblokken combineren. Eerst een col-3, dan een col-6 en vervolgens nog eens een col-3. Ook hier is de totaal som 12.

De opties die u hebt op de pagina editor zijn dus

  • Blok toevoegen (volledige breedte) (of een col-12)

  • Blok toevoegen (2 kolommen) (col-6)

  • Blok toevoegen (3 kolommen) (col-4)

  • Blok toevoegen (4 kolommen) (col-3)

Om bijvoorbeeld drie afbeeldingen naast elkaar te zetten op de pagina, kan u deze toevoegen in drie aparte col-4 blokken.
In de pagina editor ziet het er dan als volgt uit:

Maar op de website staan de drie afbeeldingen in een kolom naast elkaar:

Inhoud toevoegen

Klik op de edit button links bovenaan om de pagina te bewerken.

U ziet meteen bovenaan een werkbalk verschijnen. U kan deze verslepen door met de muis op de drie bolletjes bovenaan te staan en vervolgens te klikken en slepen.

Klik nu op het tekstblok dat u wilt bewerken en voeg uw tekst, afbeelding, video toe.

Tekst opmaken

  • Vet

  • Scheef

  • Onderstrepen

  • Doorhalen

  • Superscript

  • Subscript

  • Links uitlijnen

  • Centraal uitlijnen

  • Rechts uitlijnen

Hiermee kunt u verschillende koptekst of paragraaftekst gebruiken.

  • Lijst

  • Numerieke lijst

  • Insprong toevoegen

  • Insprong verwijderen

U kan ook de knop ‘Regeleinde’ gebruiken om een extra witregel in te voegen. Dit kan ook door shift+enter te gebruiken. Een enkele enter creert meteen een nieuwe alinea.

Afbeelding toevoegen

Klik op ‘uploaden’ om een afbeelding op te zoeken op uw computer. De afbeeldingen uit de afbeeldingenbibliotheek in de backoffice zijn hier dus niet meteen terug te vinden. De afbeelding moet op uw computer opgeslagen zijn.

Video, podcast of Google Maps toevoegen

Voeg de link naar de podcast of youtubevideo in en klik op 'Opslaan'. De podcast of video verschijnt dan embedded op de pagina.

Gezien deze functionaliteit een iframe toevoegt voor een YouTube of Spotify-link, is het in theorie mogelijk om ook andere urls te embedden (zoals bijvoorbeeld een Google maps kaart, of een externe url voor een saldochecker). Geef op dezelfde manier de url in en klik op opslaan. Je kan daarna nog de grootte van het embedded blok aanpassen.

Om bijvoorbeeld een Google maps kaart toe te voegen, klik je in Google Maps op ‘Delen’ en op ‘Een kaart insluiten’. Kopieer vervolgens de htmlcode, maar verwijder alle tags en html code zodat enkel de lange url overblijft.

 

Wijziging ongedaan maken

Klik op de pijlen om wijzigingen ongedaan te maken, om opnieuw door te voeren.

Link toevoegen

Klik op ‘Link’ om een hyperlink toe te voegen aan tekst of een afbeelding. De tekst of afbeelding wordt dan klikbaar. De tekst heeft dan echter geen blauwe kleur of onderlijning zoals in word. Deze kan je nog zelf toevoegen.

Tekstkleur wijzigen

U kan ook de kleur van de tekst wijzigen door de tekst te selecteren en ‘Tekstkleur’ aan te klikken.

Geef vervolgens de Hex code, RGB of HSB waarden in, of kies een kleur via de kleurvelden.

Afbeelding uitlijnen

Als u afbeeldingen toevoegt aan een tekstblok, dan kan u deze links, rechts of centraal uitlijnen

U kan ook de afbeeldingen verslepen naar de plaats waar u ze wilt uitlijnen. Bijvoorbeeld hier komt de afbeelding onder de alinea

 

Terug naar boven