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.
Volledige url | url voor embedding op pagina editor |
---|---|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1498.3400873235018!2d4.629954450017815!3d52.38134910120267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5ef6b4c812991%3A0x38950434e3309896!2sDe Vries Van Stockum!5e1!3m2!1snl!2sbe!4v1732876869947!5m2!1snl!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> |
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