Werken met de editor

Voor het invullen van de template maak je gebruik van onze Maglr Editor. Deze editor is zo gebruiksvriendelijk mogelijk opgezet maar kent een aantal belangrijke zaken om te weten. Hieronder de belangrijkste highlights.

Zijmenu met gelaagdheid

Afhankelijk van het soort template kan deze bestaan uit verschillende lagen. Een button kan bijvoorbeeld een pop-up activeren. Deze verschillende lagen kunnen we niet allemaal gelijktijdig weergeven, hierdoor zou alles door elkaar staan. Om deze reden werken we met lagen. Iedere laag is vanuit het linker menu visueel te openen en in te vullen.
Een laag gekoppeld aan een button is ook met de groene knop snel te openen. De blauwe arcering in het linker menu laat altijd zien waar je in de template zit.

Pagina vullen met blokken

Een pagina kan vanuit de template vaste teksten bevatten, of vrije invulvelden. Deze vrije invulvelden zijn in te vullen met blokken. We hebben in het linker menu een grote selectie met verschillende soorten blokken toegevoegd. Denk aan teksten, afbeeldingen, buttons, slideshows en quotes. 

De blokken zijn in de daarvoor gemarkeerde ruimtes te slepen. Nadat ze zijn geplaatst kunnen ze met het verplaatst icoon opnieuw worden versleept en van volgorde worden veranderd. Een blok kan je verwijderen vanuit het menu met het blauwe bolletje. Blokken die in de pagina worden gesleept krijgen automatisch de kleurstijl toegewezen, afhankelijk van de positie in de template. Als de kleurstijl correct is ingevuld krijgt een tekst die op een witte achtergrond wordt gesleept, een andere kleur als op een foto.

Uitlijnen van blokken

Horizontaal uitlijnen
Een blok die je in de pagina sleept kan op verschillende manieren worden uitgelijnd. De maximale breedte is hierbij afhankelijk van de ruimte waarom het blok wordt geplaatst. Indien het een kleine ruimte is zijn niet alle onderstaande instellingen zichtbaar. Bij hele brede ruimtes zie je het effect beter in beeld. 

De volgende uitlijn instellingen zijn mogelijk:

  • Full, 100% helemaal tegen de kantlijnen aan
  • Breed, maximaal 1000px pixels met 25 px marge aan de zijkanten 
  • Normaal, maximaal 800 pixels met 25px marge aan de zijkanten
  • Rechts uitgelijnd, 600px met 25px marge
  • Links uitgelijnd, 600px met 25px marge

In hetzelfde uitklap menu heb je tevens de mogelijkheid het blok te dupliceren of te verwijderen. 

Verticale marges en hoogtes
Ieder element heeft een ruimte boven zich. Deze ruimte is met 

Scroll waarschuwing & preview

Pagina’s in Maglr zijn responsive ofwel elastisch. Afhankelijk van het schermformaat is de pagina altijd beeldvullend. Dit zorgt ervoor dat wat je in de editor opmaakt, niet altijd op dezelfde manier bij een bezoeker op zijn beeldscherm verschijnt. 

Hiervoor hebben we een Preview functie in de editor gemaakt. Met deze preview bekijk je het resultaat in drie verschillende formaten. Dit geeft een basisrichting hoe de pagina eruit ziet op desktop, tablet en mobiel.

Met het vullen van tekst of blokken in een template kan het zijn dat de content netjes past op een groot desktop beeldscherm, maar op een kleiner scherm een scrollbalk gaat vertonen, omdat de erin gesleepte inhoud niet meer past. De editor geeft in dat geval een waarschuwing. Om te controleren wat er mis gaat kan je in de preview terug schakelen naar Tablet modus. Hier kan je zien waar de content te lang is en een scrollbalk laat zien. 

Herhalende elementen

Als je een elementen of een templatelaag aanklikt in de editor, kan het zijn dat je een oranje icoontje ziet verschijnen. Dit betekent dat het element binnen de visuele ruimte gedupliceerd kan worden. 


We gebruiken deze optie meestal bij pagina’s waarin het aantal onderwerpen variabel kunnen zijn. Denk aan een overzicht met artikelen, of een blok met tabjes, waar je een extra tabje bij zou willen maken. Vanuit het oranje icoontje is het mogelijk het onderdeel te dupliceren, verwijderen of van volgorde te veranderen.

Inline afbeeldingen en achtergrond afbeeldingen

Afbeeldingen die vast staan in de template zijn altijd als achtergrond ingesteld. Een achtergrond is meestal in het midden uitgelijnd. Een vervangende afbeelding zal zich dan ook altijd ‘centeren’ waarbij de randen worden afgesneden. Door deze manier is de afbeelding altijd beeldvullend, welke verhouding de ruimte ook heeft.


Toch kan het zijn dat je een andere uitsnede wilt laten zien. Vanuit de opties is het mogelijk de uitlijning te kiezen :

  • Positioneren, kies zelf een uitsnede van het beeld, let wel op, per schermtype kan dit variëren
  • Uitvullen, beeld wordt altijd vanuit het midden vullend binnen de ruimte weergegeven
  • Volledig weergeven, beeld wordt altijd passend binnen de ruimte geplaatst
  • Herstellen, alles terugzetten naar hoe het standaard was ingesteld
Vanuit de blokken module kan je twee soorten afbeelding kiezen. Een ‘inline afbeelding’ of een ‘background afbeelding’. Een inline afbeelding laat zichzelf op 100% breedte zien in de verhouding van het beeld zelf. Een ‘background afbeelding’ past zich aan op de afgrond (afhankelijk van zijn instellingen). Een inline afbeelding kan ook verder niet worden ingesteld.

Achtergrond afbeelding naar video of kleur aanpassen

Een achtergrond kan uit drie verschillende functies bestaan. Een kleur, een achtergrond foto of een video. Bij het aanklikken van een achtergrond verschijnt linksonder het kader een klein menu. Met dit menu is de achtergrond van functie te veranderen. 

Een video kan alleen worden toegevoegd met behulp van een Youtube of een Vimeo account. Ga naar de website van youtube of vimeo en kopieer de URL van de video uit de browserbalk (bijvoorbeeld: https://www.youtube.com/watch?v=35T5HEhGrDg


Plak deze URL in de instellingen balk en de video is toegevoegd. Via de losse instellingen van de video kan je bepalen of de controls zichtbaar zijn, de video automatisch moet spelen of de video als achtergrond beeld moet draaien. 

In dat laatste geval begint de video automatisch met afspelen, in loop en staat het geluid uit. Deze optie wordt vooral gebruikt om video groot als decoratie achter tekst te laten spelen.

Tekst van formaat veranderen

Teksten die worden geplaatst als blok hebben een standaard formaat. Bij het aanklikken van de tekst is het mogelijk om dit formaat op twee manieren te veranderen. We hebben verschillende soorten ‘presets’ die je kan kiezen, en automatisch meeschalen op mobiele formaten. Of je kan de tekst handmatig aanpassen. We adviseren de presets te gebruiken en bij uitzondering de handmatige aanpassingen. 


Door gebruik te maken van presets werk je niet alleen sneller, je bent er ook zeker van dat de tekst in alle schermformaten goed leesbaar is. In het tweede menu (A icoon) is het ook mogelijk het lettertype van het specifieke tekstveld aan te passen.

Link maken

Ieder element wat in de editor is te selecteren kan worden gelinkt via het instellingen menu. Let op dat je enkel het element linkt wat klikbaar moet zijn. Indien je een achtergrond linkt, zit te klik ook op objecten die eroverheen liggen. Bij het aanmaken van een link zijn de volgende opties van toepassing:


  • Pagina
  • Referentie (vaste string in gegeven bij de pagina instellingen)
  • Extern http adres
  • Bestandslink
  • Serie standaard functionaliteiten van het systeem

Onderdelen template uitschakelen

Indien je een onderdeel van een template niet wilt gebruik, dan kan dit worden uitgeschakeld. Dit kan je doen met het oog icoontje in het pop-up menu. Let wel op dat het inactief zetten van een element, invloed kan hebben op de opmaak. Via het menu “overige opties” kan je inactieve elementen weergeven in de editor, zodat je ze weer kan selecteren om op actief te zetten.

Overige opties

Onder het menu 'overige opties' zijn nog extra mogelijkheden verstopt. Een belangrijke functie is de do/undo die ook onder de bekende toetscombinaties zijn verstopt. Een andere optie is het ‘resetten’ van een element, of een complete pagina. Heb je tussentijds een pagina verkeerd opgeslagen, gebruik dan de back-up functie om een oude versie terug te halen.