De Geavanceerde Editor van de Websitemaker heeft een Flexmodus waarmee je responsieve flex-secties kan ontwerpen. Deze secties bieden extra ontwerpmogelijkheden. In dit artikel leggen we uit hoe je de Flexmodus gebruikt en welke opties er zijn.
Let op: de Flexmodus is alleen beschikbaar als je vanuit de Eenvoudige Editor overstapt naar de Geavanceerde Editor. Start je direct in de Geavanceerde Editor, dan is deze modus niet beschikbaar en kan je geen flex-secties ontwerpen.
Ontwerpvenster
Via het ontwerpvenster van de Flexmodus kan je afzonderlijke elementen van je website aanpassen, zoals secties, kolommen en widgets. Welke instellingen je precies kan aanpassen, hangt af van het geselecteerde element. Zo kan je onder andere de uitlijning, lay-out en achtergrond wijzigen.
Volg deze 2 stappen om het ontwerpvenster te openen:
1. Klik op het element waarvan je de instellingen wil bewerken.
2. Klik vervolgens op Klik om te bewerken in Flexmodus.
Je bent nu in het ontwerpvenster. Via het menu aan de rechterkant kan je, afhankelijk van het element, de volgende instellingen aanpassen:
- Uitlijning
- Lay-out
- Ruimten
- Grootte
- Animatie
- Achtergrond
1. Uitlijning
Deze instelling is beschikbaar voor afzonderlijke elementen binnen een kolom. Je kan de elementen links, gecentreerd of rechts uitlijnen of ze over de volledige breedte van de kolom uitrekken.
Om deze instelling te gebruiken, klik je op een onderdeel van een kolom. Rechtsboven in het menu verschijnt dan de optie Uitlijning.
Let op: wil je meerdere elementen binnen een kolom tegelijk uitlijnen? Dat kan met de optie Uitlijning van inhoud bij Lay-out.
2. Lay-out
Volledige bleed
Deze optie is alleen beschikbaar voor secties (niet voor kolommen en widgets).
Als je deze optie inschakelt, wordt de inhoud van een sectie over de volledige breedte van het scherm weergegeven. Staat de optie uit, dan is de maximale breedte 1200 pixels.
Standaard staat deze instelling uitgeschakeld.
Uitlijning van inhoud
Met deze instelling kan je meerdere elementen binnen een kolom tegelijk uitlijnen. Daarmee zorg je ervoor dat de positie van elementen op alle schermformaten hetzelfde blijft, zonder dat je extra aanpassingen hoeft te doen.
Je kan elementen zowel horizontaal als verticaal uitlijnen.
Stapelrichting
Met deze instelling bepaal je hoe de elementen in een kolom worden gerangschikt: verticaal onder elkaar of horizontaal naast elkaar. Standaard worden de elementen verticaal gerangschikt.
Let op: je kan elementen alleen verplaatsen in de richting die je hebt ingesteld. Als de elementen bijvoorbeeld verticaal zijn uitgelijnd, kan je ze alleen verticaal en niet horizontaal verplaatsen in de kolom.
Wrap
Deze optie is alleen beschikbaar als je een horizontale stapelrichting hebt geselecteerd.
Wanneer je Wrap inschakelt, behouden de elementen in een kolom hun afmetingen op verschillende schermformaten, bijvoorbeeld op een mobiele telefoon. Als er onvoldoende ruimte is om de elementen naast elkaar weer te geven, worden ze automatisch onder elkaar verplaatst.
3. Ruimten
Afstand tussen elementen
Met deze optie bepaal je de ruimte tussen de verschillende elementen binnen een sectie. De ingestelde afstand geldt automatisch voor alle kolommen in een sectie of alle widgets in een kolom.
Bij een verticale stapelrichting wordt de ruimte tussen widgets gemeten in px (pixels). Als je een horizontale stapelrichting hebt geselecteerd, wordt de ruimte gemeten in % (percentages).
Marges en opvulling instellen
Met deze optie kan je de marges en opvulling van een element instellen.
De marge is de ruimte tussen de rand van een element en de sectie of kolom waarin het element zich bevindt. De opvulling is de binnenruimte van een element.
Klik op een cijfer om een nieuwe waarde in te vullen. Gebruik vervolgens het dropdownmenu om de maateenheid te selecteren. Je kan kiezen tussen de volgende opties:
- % (percentages): flexibele maat die automatisch mee schaalt met het schermformaat. Hierdoor blijft het element responsief en goed zichtbaar op verschillende apparaten.
- px (pixels): vaste maat die niet automatisch mee schaalt met het schermformaat. Dit is vooral geschikt voor precieze afmetingen, zoals knoppen of logo's, maar maakt het element minder responsief.
- vh (viewport height): gebaseerd op de schermhoogte. 1 vh = 1% van de totale hoogte. Handig voor full-screen achtergronden en elementen die moeten meegroeien met het scherm.
- vw (viewport width): werkt hetzelfde als vh, maar dan op basis van de schermbreedte. 1 vw = 1% van de totale breedte. Ideaal voor elementen die altijd een vast percentage van het scherm moeten innemen, zoals banners.
Standaard wordt de horizontale afstand gemeten in % (percentages) en verticale afstand in px (pixels).
Opvulling/marge opnieuw instellen
Als je op deze optie klikt, zet je alle instellingen terug naar 0.
4. Grootte
Met deze optie kan je de hoogte en breedte van afzonderlijke elementen instellen. Welke instellingen beschikbaar zijn, verschilt per element. Voor sommige elementen kan je bijvoorbeeld alleen de hoogte instellen.
Klik op een cijfer om een nieuwe waarde in te vullen. Gebruik vervolgens het dropdownmenu om de maateenheid te selecteren. Afhankelijk van het element, kan je kiezen tussen % (percentages), px (pixels), vh (viewport height), vw (viewport width) of A (automatisch).
Daarnaast kan je, afhankelijk van het element, de minimale en maximale afmetingen instellen. Hiermee bepaal je hoe klein of groot een element mag worden, afhankelijk van de beschikbare ruimte op het scherm. Klik hiervoor op Meer opties voor maten.
5. Animatie
Met deze instelling kan je een element laten bewegen. Je kan hierbij de volgende opties instellen:
- Trigger: wanneer de animatie start, bijvoorbeeld bij het laden van de pagina.
- Animatie: de daadwerkelijke animatie van de widget, zoals vervagen of inzoomen.
Afhankelijk van welke animatie je kiest, kan je ook de Aanwijzing instellen. Dit bepaalt uit welke richting de animatie start of hoe het element beweegt.
Daarnaast kan je, afhankelijk van de gekozen animatie, de volgende instellingen aanpassen:
- Duur: hoe lang de animatie duurt (in milliseconden).
- Vertraging: hoe lang het duurt voordat de animatie start (in milliseconden).
- Stroom: de snelheid en intensiteit van de animatie.
6. Achtergrond
Met deze optie kan je de achtergrondkleur van een element aanpassen. Ook kan je een afbeelding of video aan de achtergrond toevoegen.
Om de achtergrondkleur van een element aan te passen, klik je op Kleur en vervolgens op het rondje naast Achtergrondkleur.
Om een afbeelding toe te voegen, klik op je op Afbeelding en vervolgens op het grijze vak. Je kan eventueel ook meerdere afbeeldingen toevoegen voor een diavoorstelling.
Om een video toe te voegen, klik je op Video en vervolgens op Video selecteren om een video te uploaden. Je kan ook een video insluiten via een URL door een link in te voeren bij URL van YouTube, Vimeo of DailyMotion.
Let op: achtergrondvideo's hebben geen geluid. Alleen met de widget Video kan je video's met geluid uploaden.
Daarnaast kan je de volgende achtergrondinstellingen aanpassen:
- Hoekradius: met deze instelling bepaal je hoe afgerond de hoeken van het element zijn. Hoe hoger de waarde, hoe ronder de hoeken. Bij een waarde van 0 zijn de hoeken recht.
- Rand: hiermee voeg je een lijn toe rondom het element. Je kan de dikte en kleur instellen en kiezen of de lijn het hele element omringt of slechts een deel.
- Schaduw: met deze optie voeg je een schaduweffect toe rondom het element.
Deze instellingen zijn toepasbaar op zowel een normale achtergrond als een afbeelding of video.
Secties
In de editor kan je eenvoudig nieuwe secties toevoegen of bestaande secties verwijderen. Nadat je een nieuwe sectie hebt aangemaakt, kan je eventueel kolommen toevoegen, verwijderen of herschikken om de gewenste indeling te creëren. Ook kan je verschillende soorten widgets toevoegen.
Een sectie toevoegen
Volg deze 3 stappen om een sectie toe te voegen:
1. Beweeg je muis tussen 2 secties, op de plek waar je een nieuwe sectie wil toevoegen.
2. Klik op de knop + Sectie toevoegen.
3. Kies het type sectie dat je wil toevoegen.
Een sectie verwijderen
Je kan een sectie op 2 manieren verwijderen:
1. Selecteer de sectie die je wil verwijderen en klik in het zwevende menu op het prullenbak-icoontje.
2. Klik met de rechtermuisknop op de sectie en selecteer de optie Verwijderen.
Kolommen
Wanneer je een nieuwe sectie aanmaakt, kan je daar kolommen aan toevoegen om widgets in te plaatsen. Ook kan je bestaande kolommen verwijderen.
Let op: elke sectie moet minimaal 1 kolom bevatten. Je kunt de laatste kolom in een sectie dus niet verwijderen.
Een kolom toevoegen
Volg deze 3 stappen om een kolom aan een sectie toe te voegen:
1. Selecteer een bestaande kolom of sectie met kolommen.
2. Klik in het zwevende menu op het icoon met drie stippen.
3. Selecteer Add Column (Kolom Toevoegen).
Je kan ook een nieuwe kolom toevoegen door op het plus-icoon te klikken aan de linker- of rechterkant van een kolom.
Een kolom verwijderen
Net als een sectie, kan je een kolom op 2 manieren verwijderen:
1. Selecteer de kolom die je wil verwijderen en klik in het zwevende menu op het prullenbak-icoontje.
2. Klik met de rechtermuisknop op de kolom en selecteer de optie Verwijderen.
Widgets
Widgets zijn bouwblokken waarmee je eenvoudig verschillende functies aan je website toevoegt, zoals tekst, afbeeldingen, knoppen of formulieren. Een widget plaats je altijd in een kolom.
Een widget toevoegen
Volg deze 3 stappen om een widget toe te voegen aan een kolom:
1. Selecteer de kolom waar je een widget aan wil toevoegen.
2. Klik op het plus-icoon in het midden van de kolom of in het zwevende menu.
3. Kies de gewenste widget uit de lijst.
Geavanceerde rasters
Met geavanceerde rasters kan je complexe lay-outs maken en elementen vrij positioneren binnen een sectie. Dit biedt meer flexibiliteit dan standaard kolommen en maakt het mogelijk om elementen te laten overlappen of in een unieke compositie te plaatsen.
Geavanceerde rasters zijn vooral handig voor:
- Creatieve ontwerpen waarbij elementen buiten de standaardstructuur worden geplaatst.
- Gelaagde lay-outs waarin widgets elkaar gedeeltelijk overlappen.
- Responsieve indelingen waarbij elementen zich aanpassen aan verschillende schermformaten, zonder dat ze in een vaste kolomstructuur blijven.
Een geavanceerd raster toevoegen
Volg deze 3 stappen om een geavanceerd raster toe te voegen aan een kolom:
1. Selecteer de kolom waar je het raster aan wil toevoegen.
2. Klik op het plus-icoon in het midden van de kolom of in het zwevende menu.
3. Scroll naar beneden en selecteer Advanced Grid (Geavanceerd raster).
Een geavanceerd raster bewerken
Via het menu aan de rechterkant kan je de lay-out van het raster bewerken. Je kan de indeling herschikken, kolommen en rijen toevoegen en de ruimte tussen verschillende kolommen of rijen aanpassen.
Daarnaast kan je widgets toevoegen met het plus-icoon, zoals afbeeldingen of tekst.
Je kan widgets eenvoudig binnen het raster rangschikken door ze te selecteren en naar de gewenste plek te slepen.
Daarnaast kan je met de optie Schikking in het rechtermenu de Uitlijning en Volgorde van de widgets aanpassen. Hiermee kan je widgets horizontaal of verticaal uitlijnen en ze naar voren of achteren verplaatsen in het raster.