In dit artikel lees je hoe secties, kolommen en widgets gebruikt om je website te bouwen in Websitemaker Editor 2.0. Deze nieuwe editor maakt gebruik van moderne flex-technologie.
We laten zien hoe je flex-elementen (secties, kolommen en widgets) selecteert in de editor en hoe je nieuwe elementen toevoegt aan een pagina. Ook leggen we uit wat geavanceerde rasters zijn en hoe je deze gebruikt om een complex of creatief ontwerp te maken.
Let op: lees ook ons artikel over het ontwerppaneel in Editor 2.0. Daarin leggen we uit hoe je de opmaak van afzonderlijke elementen aanpast via het ontwerppaneel.
-
De structuur van een pagina in Editor 2.0
-
Elementen selecteren en navigeren in de editor
-
Flex-secties
-
Flex-kolommen
-
Widgets
-
Geavanceerde rasters
De structuur van een pagina in Editor 2.0
In Editor 2.0 is elke websitepagina opgebouwd volgens het ouder-kindprincipe. Dat betekent dat alle elementen op je pagina een hiërarchische structuur volgen.
De hoofdonderdelen van de pagina, zoals kopteksten, inhoudsblokken en menu’s, bevatten altijd minstens één sectie. Elke sectie bestaat uit minimaal één kolom. In zo’n kolom plaats je één of meerdere widgets, bijvoorbeeld tekst, afbeeldingen of knoppen. Ook kan je hier binnenste kolommen of geavanceerde rasters in plaatsen.
In deze structuur noemen we een element dat andere onderdelen bevat een ouder-element en de inhoud daarvan kind-elementen.
Voorbeeld:
Als je de ontwerpinstellingen van een ouder-element aanpast, worden die automatisch toegepast op alle kind-elementen die erin zitten. Daardoor hoef je niet elk element apart aan te passen. Geef je bijvoorbeeld een sectie een andere uitlijning? Dan geldt die ook automatisch voor alle kolommen en widgets binnen die sectie.
Je kan de opmaak van kind-elementen ook los instellen. Zo kan je bijvoorbeeld een kolom een andere achtergrond geven dan de sectie waarin die staat. Dankzij deze structuur heb je meer controle over je ontwerp en werk je efficiënter aan je website.
Elementen selecteren en navigeren in de editor
Elke pagina is opgebouwd uit verschillende flex-elementen, zoals secties, kolommen en widgets. Je kan deze elementen op drie manieren selecteren in de editor: direct op de pagina, via kruimelpaden of via het lagenpaneel.
Direct op de pagina
Je kan elementen eenvoudig selecteren door er rechtstreeks op te klikken in de editor. Zodra je een element aanklikt, opent aan de rechterkant het ontwerppaneel met alle beschikbare instellingen voor dat element. Via dit paneel kan je de opmaak aanpassen.
Meer informatie over alle ontwerpinstellingen vind je in ons artikel over het ontwerppaneel van Editor 2.0.
Via kruimelpaden
Nadat je een element hebt geselecteerd, kan je eenvoudig navigeren naar het ouder-element erboven via een van de twee kruimelpaden. Je vindt deze kruimelpaden in het zwevende menu boven het element (de blauwe balk) en bovenaan het ontwerppaneel. Hiermee klik je snel terug naar de bijbehorende kolom of sectie.
Via het lagenpaneel
Als je een element selecteert, wordt dit automatisch uitgelicht in het lagenpaneel aan de linkerkant. Dit paneel toont een overzicht van alle elementen op de pagina in een boomstructuur. Zo zie je meteen waar het element zich bevindt op je pagina.
Je kan elementen ook selecteren via het lagenpaneel zelf. Het geselecteerde element wordt dan in de editor gemarkeerd met een blauwe rand, zodat je het direct kan bewerken. Op deze manier navigeer je snel en eenvoudig binnen de structuur van je pagina.
Flex-secties
Een flex-sectie is een rij met standaard 2 kolommen. Hiermee leg je de basis voor de lay-out van je pagina. In de editor kan je eenvoudig nieuwe flex-secties toevoegen of bestaande secties verwijderen.
Nadat je een nieuwe sectie hebt aangemaakt, kan je kolommen, binnenste kolommen of geavanceerde rasters toevoegen om de gewenste indeling te creëren. Ook kan je bestaande kolommen verwijderen of dupliceren. Binnen deze structuur plaats je vervolgens widgets.
Een flex-sectie toevoegen
Volg deze 4 stappen om een nieuwe sectie toe te voegen:
- Beweeg je muis tussen twee rijen en klik op + Sectie toevoegen.
Of: klik met de rechtermuisknop op de pagina, selecteer Toevoegen en kies daarna Flex-sectie. - Klik in het zijpaneel op Flex-secties.
- Selecteer het type sectie dat je wil toevoegen.
- Klik op Opslaan.
Een flex-sectie verwijderen
Je kan op 2 manieren een sectie verwijderen:
- Klik met de rechtermuisknop op de sectie en selecteer Verwijderen.
- Of: selecteer de sectie en klik in het zwevende menu op het prullenbak-icoon.
Flex-kolommen
Elke flex-sectie heeft standaard 2 kolommen, maar je kan eventueel kolommen toevoegen, dupliceren of verwijderen. Een sectie kan maximaal 8 kolommen bevatten.
Een flex-kolom toevoegen
Volg deze 2 stappen om een nieuwe kolom aan een sectie toe te voegen:
Klik op een bestaande kolom in de sectie.
- Klik in het zwevende menu op het icoon met de 3 grijze stippen en selecteer Kolom toevoegen.
Of: klik op het plus-icoon aan de linker- of rechterkant van de kolom.
Een flex-kolom dupliceren
Als je een kolom dupliceert, wordt rechts van de kolom een kopie geplaatst. Dit werkt niet als de totale breedte daarmee boven de 100% uitkomt.
Je kan op 2 manieren een kolom dupliceren:
- Klik met de rechtermuisknop op de kolom en selecteer Dupliceren.
- Of: selecteer de kolom en klik in het zwevende menu op het dupliceren-icoon.
Een flex-kolom verwijderen
Je kan op 2 manieren een kolom verwijderen:
- Klik met de rechtermuisknop op de kolom en selecteer Verwijderen.
- Of: selecteer de kolom en klik in het zwevende menu op het prullenbak-icoon.
Let op: elke sectie moet minimaal 1 kolom bevatten. Je kan de laatste kolom in een sectie dus niet verwijderen.
Widgets
Widgets zijn bouwblokken waarmee je inhoud aan je website toevoegt, zoals tekst, afbeeldingen of knoppen. Een widget plaats je altijd in een kolom, binnenste kolom of geavanceerd raster. Je kan deze dus niet direct aan een sectie toevoegen.
Als je widgets toevoegt aan een kolom, bepaalt de stapelrichting hoe deze worden gerangschikt: verticaal (onder elkaar) of horizontaal (naast elkaar). Je kan de stapelrichting aanpassen in het ontwerppaneel, bij het onderdeel Lay-out. Meer uitleg hierover vind je in ons artikel over het ontwerppaneel van Editor 2.0.
Wil je widgets laten overlappen of vrij positioneren, zonder een automatische stapelrichting? Dat kan alleen met geavanceerde rasters. Verderop in dit artikel lees je daar meer over.
Een widget toevoegen
Volg deze 3 stappen om een widget toe te voegen:
- Klik op een kolom, binnenste kolom of geavanceerd raster.
- Klik in het midden daarvan of in het zwevende menu op het plus-icoon.
- Selecteer de widget die je wil toevoegen.
Geavanceerde rasters
Wil je jouw website een complexe of unieke lay-out geven? Dan raden we aan om geavanceerde rasters te gebruiken. Hiermee kan je elementen vrij positioneren binnen een sectie. Zo kan je bijvoorbeeld widgets laten overlappen of op een creatieve manier indelen.
Dit geeft je meer flexibiliteit dan standaardkolommen, waarbij elementen automatisch horizontaal óf verticaal worden gerangschikt (stapelrichting).
Let op: controleer altijd je ontwerp op alle schermformaten. Zo weet je zeker dat je website op elk apparaat goed wordt weergegeven.
Een geavanceerd raster toevoegen
Volg deze 3 stappen om een geavanceerd raster toe te voegen aan een kolom:
- Klik op de kolom waar je het raster aan wil toevoegen.
- Klik in het midden van de kolom of in het zwevende menu op het plus-icoon.
- Scroll naar beneden en selecteer in het gedeelte Flex-elementen de optie Advanced Grid (Geavanceerd raster).
Tip: sleep de randen van het raster zodat het de volledige breedte van de kolom beslaat. Dat geeft het mooiste resultaat.
Een geavanceerd raster bewerken en widgets toevoegen
Nadat je een geavanceerd raster hebt toegevoegd, kan je via het ontwerppaneel de lay-out bewerken. Ook kan je widgets toevoegen en deze naar wens positioneren.
Volg hiervoor deze 5 stappen:
- Klik in het ontwerppaneel aan de rechterkant op Lay-out.
- Kies een indeling voor het raster bij Indeling herschikken. Stel je liever zelf een indeling samen? Via Lay-out aanpassen kan je zelf kolommen of rijen toevoegen.
- Klik in het zwevende menu op het plus-icoon en selecteer de gewenste widgets.
- Versleep de widgets binnen het raster om ze naar wens te positioneren.
- Wil je een widget naar voren of achteren plaatsen in het raster? Klik dan op deze widget en ga in het ontwerppaneel naar Schikking. Je hebt hier de volgende opties:
- Naar voren brengen
- Helemaal naar voren brengen
- Naar achteren sturen
- Helemaal naar achteren sturen