Html en de PageBuilder

Responsive layout

Als je een pagina gaat opbouwen, begin je met een ‘container’. Een container bepaalt de breedte van de inhoud. Op grote schermen zal er links en rechts witruimte zijn om te voorkomen dat tekstregels te lang worden; op kleine (mobiele) schermen zal de container even breed zijn als het scherm.

In een container zit een rij (‘row’), welke één tot maximaal 12 kolommen (‘cols’) kan bevatten. Je kunt kolommen samenvoegen om verschillende layouts te maken. Dit kun je voor telefoon, tablet en desktop apart instellen.

In onderstaand voorbeeld zijn voor desktop kolom 1-4, 5-8 en 9-12 samengevoegd en zijn voor mobiel alle 12 kolommen samengevoegd. Op deze manier kun je de layout per apparaat aanpassen met gebruik van dezelfde elementen.

Elementen

Element-in-element

HTML elementen kunnen in een ander HTML element geplaatst worden. Binnen de PageBuilder kun je in een col component vanuit het linkermenu een element slepen of via een link in de content tab in de instellingen.

Niet ieder element kun je binnen een bepaald element plaatsen. Een box component kun je bijvoorbeeld wel in een col component slepen, maar andersom niet. Als je dat probeert, verschijnt er in de PageBuilder een rode lijn en kun je het element niet ‘los laten’. Hetzelfde geldt voor kopiëren. Alleen als het te kopiëren element toegestaan is binnen het element waarin je het wilt plakken, dan is de plak-button beschikbaar.

Als elementen in elkaar geplaatst zijn, ligt het binnenste element als het ware bovenop. Je kunt met de pijltje-knop boven het element dieper in de elementenstructuur duiken. Dit werkt dus van binnen naar buiten. Van buiten naar binnen is niet mogelijk, omdat een element meerdere elementen binnenin kan hebben.

Box

Het box component (div) is een soort lege doos waarin je weer andere componenten kunt plaatsen. Op deze manier worden componenten gegroepeerd. Maar je kunt een box ook styling meegeven voor de plaatsing van de componenten binnen een box. Zie hiervoor de uitleg van de advanced opties.

Het box component krijgt standaard de html-tag ‘div’, maar je kunt dit voor styling of SEO aanpassen met de label optie in de advanced tab. De optie ‘tussenruimte’ kan gebruikt worden om ruimte te creëren tussen elementen binnenin het element als bij ‘weergave’ de optie grid of inline-grid is gekozen.

Tekst (paragraph)

Het tekst component (p) kan gebruikt worden voor kopjes, tekstjes en opsommingen.

Hoewel er visueel geen verschil is tussen de ‘kop’ optie in de style tab en de ‘class voor kop’ optie in de advanced tab, is het in het kader van SEO wel belangrijk om een goede afweging te maken tussen deze twee opties. Kies je h1 bij de optie ‘kop’ in de style tab, dan krijgt de kop een h1-tag; kies je bij optie ‘class voor kop’ voor h1, dan wordt er een h1-class aan de html-tag toegevoegd. Met een h1-tag geef je voor SEO aan dat dit de hoofdkop is van de pagina. Met een h1-class geef je een tekst alleen de styling van een h1. De standaard tag van het tekst component is p (paragraph).

De link optie in de advanced tab is bedoeld om een link in een tekst toe te voegen.

Wil je de hele tekst als link gebruiken, dan kun je beter het link component gebruiken en daar een tekst component plaatsen.

Icoon

Wil je een ander icoontje gebruiken dan in het lijstje staat, kies dan ‘Icoon naam’ onder ‘Selecteer een icoon optie’. Klik vervolgens op de link naar de Font Awesome website en selecteer een icoon. Klik in de popup op de naam van het icoon (de naam wordt dan gekopieerd) en plak deze in het input-veld in de PageBuilder.

Afbeelding

De optie ‘beschrijving van de afbeelding’ voegt een alt-tekst toe aan de afbeelding. Een alt-tekst is belangrijk voor SEO en screenreaders.

Een afbeelding wordt standaard geplaatst over de volle breedte van het element waarin de afbeelding staat. Wil je dit niet, dan kan je de optie ‘meeschalend’ in de advanced tab uitzetten. Als je dat doet, kun je een breedte en/of hoogte kiezen.

Bij de breedte en hoogte heb je de keuze voor percentage en pixel. Als je percentage selecteert, wordt er een class met het percentage toegevoegd. Hierdoor kun je per apparaat een andere waarde instellen. Als je kiest voor pixel (px) wordt de waarde toegevoegd als inline style en geldt dus voor alle apparaten.

Als je een hoogte en breedte hebt ingesteld kun je met de optie ‘afbeelding passend maken’ aangeven hoe de afbeelding wordt weergegeven binnen deze ruimte. Met ‘fill’ wordt de afbeelding getoond met de ingestelde breedte en hoogte. De afbeelding kan hierdoor vervormd worden. ‘Contain’ zorgt ervoor dat de gehele afbeelding getoond wordt; er kan dan lege ruimte ontstaan. ‘Cover’ vult de afbeelding volledig uit over de ruimte, maar vervormt de afbeelding niet; wel kunnen er delen van de afbeelding afgesneden worden. Met ‘none’ wordt de afbeelding in zijn oorspronkelijke grootte getoond; er kan zowel lege ruimte ontstaan of delen afgesneden worden. ‘Scale-down’ is vergelijkbaar met ‘contain’, maar het verschil is dat wanneer de oorspronkelijke grootte van de afbeelding kleiner is dan de ruimte deze niet ‘opgeblazen’ wordt. ‘Inherit’ betekent dat de waarde van het element waarin de afbeelding staat wordt overgenomen.

Afbeeldingslink (Interactive image)

De afbeeldingslink is een link component met daarin een afbeelding. Binnen deze combinatie kun je styling kiezen voor wanneer de gebruiker met de muis over een afbeelding gaat (hover).

Ook kun je de afbeelding een standaard verhouding (ratio) meegeven. Dat is handig als je meerdere afbeeldingen hebt die je allemaal precies even groot wilt tonen; Je hoeft dan niet alle afbeeldingen precies gelijk uit te snijden in een beeldbewerkingsprogramma.

Button

Wanneer je een link hebt toegevoegd aan een button en je klikt in de preview op de button, verschijnt in een tooltip de url. Het daadwerkelijk navigeren naar de url is in de PageBuilder uitgeschakeld.

Bij bestemming (target) kun je kiezen uit blank en self. Bij blank wordt er een nieuwe browser tab geopend, bij self wordt de pagina in dezelfde tab geopend.

Ook is het mogelijk om een icoon toe te voegen met de toggles in de content tab. Als je een toggle aanzet, wordt er aan de linker- of rechterkant van de button een icoon component toegevoegd. Het icoon kan je vervolgens aanpassen zoals beschreven onder het kopje Icoon.

Link

Een link component (a) heeft veel dezelfde opties als een box component. Het grote verschil tussen een a en een div component is dat je aan een link een url (href) kunt toevoegen om ergens naartoe te navigeren. Gebruik een link alleen als het doel is om de gebruiker door te laten klikken. Een html a tag zonder of met een niet werkende url is slecht voor SEO.

Net als bij een button kun je in de preview de url controleren via de tooltip door op het element te klikken.

Dropdown

Om het menu van de dropdown te openen, klik je op het bolletje met het radartje rechtsonder. Je kunt dan met de toggle in de instellingen het dropdown menu openen.

Klik je op het bolletje met het radartje bij het menu kun je items toevoegen en kun je het menu stylen. Klik je vervolgens op de donkere achtergrond, wordt weer de instellingen tab van de dropdown getoond en kun je het dropdown menu weer sluiten met de toggle.

Slider

In de instellingen van het slider component kun je per apparaat kiezen hoeveel slides er naast elkaar zichtbaar zijn en of er ruimte er tussen de slides getoond moet worden. Je kunt instellen of er pijltjes links en rechts getoond moeten worden of bolletjes onderaan om de slider te bedienen.

Ook kun je de slider weer opnieuw laten beginnen bij de eerste slide als alle slides getoond zijn met de optie ‘herhaling’. Voor de optie ‘automatisch afspelen’ kun je met ‘vertraging’ instellen hoe snel de slider gaat.

Als je een slide aanklikt, kun je inhoud toevoegen aan de slide, zoals een kaart of review element of een afbeelding of je kunt zelf een element bouwen met een box of link component.

De slider beweegt niet in de builder, wel in de preview en uiteraard op de site.

Menu (list)

Het menu component creëert een lijst (ol) met opsommingselementen (li).

Je kunt een kant-en-klaar menu item toevoegen; dit is een opsommingselement met een link component en een tekst component. Je kunt via de content tab ook een leeg opsommingselement toevoegen om zelf de inhoud te bepalen.

Tips & tricks: door de weergave om te zetten naar ‘flex’, kun je een horizontaal menu maken.

Accordeon

Klik op het bolletje met het radartje rechts onderin om de instellingen te openen. Hier kun je nog meer accordeonitems toevoegen.

Standaard wordt een accordeonitem gesloten als een ander item wordt geopend, maar dit kun je uitzetten onder de tab advanced.

Je kunt een accordeonitem openen door op het bolletje met het radartje aan de rechterkant te klikken. In het veld onder het accordeonkopje kun je dan content toevoegen.

Offcanvas

Een offcanvas is een verborgen zijpaneel dat inschuift. Voor het mobiele menu wordt bijvoorbeeld gebruik gemaakt van een offcanvas.

Als je het offcanvas component toevoegt, zie je in eerste instantie alleen een button.
Let op: je hoeft geen link of bestemming toe te voegen aan deze button.

Met het bolletje met het radartje open je de instellingen van de offcanvas. Vervolgens kun je met de toggle ‘offcanvas panel bewerken’ het zijpaneel openen. Wanneer je klaar bent met het inrichten van het zijpaneel, klik je op de donkere achtergrond voor de settings van de offcanvas, waar je het zijnpaneel weer kunt sluiten.

Onder de advanced tab kun je instellen of het mogelijk is om te scrollen op de pagina eronder als het zijpaneel open is; of je een donkere achtergrond wilt tonen en aan welke zijde van de browser het zijpaneel geopend moet worden.

Advanced opties

Marge

Je kunt marge rondom een element (margin) of binnenin een element (padding) toevoegen. Je kunt per zijde apart of voor alle zijden tegelijk een marge instellen en indien gewenst voor ieder apparaat apart.

Padding instellen:

Margin instellen:

Waar je op moet letten bij het instellen van marge:

• Als een element een breedte van 100% heeft, kun je horizontale scroll-balken krijgen.
• Als een element marge rondom aan de onderkant heeft en het element eronder (margin-bottom) heeft marge rondom aan de bovenkant (margin-top), worden deze marges samengevoegd (margin collapsing); de grootste marge wordt dan aangehouden.

Overlap

Met overlap (overflow) kun je aangeven wat er moet gebeuren als een element te groot is voor het element waarin het geplaatst is. De opties zijn:

• Hidden: het element wordt afgesneden.
• Scroll: er worden scroll-balken getoond; ook wanneer een element niet te groot is.
• Auto: er worden scroll-balken getoond als het element te groot is.
• Visible: het element wordt in zijn geheel getoond.

Voor allen geldt dat je de optie voor horizontaal (x), verticaal (y) en horizontaal en verticaal samen kunt instellen.

Weergave

Met weergave (display) kun je instellen hoe een element zich gedraagt op een pagina. De opties zijn:

• Block: het element vult de volledige breedte; het volgende element begint dus automatisch eronder.
• Inline: het element gedraagt zich alsof het in een zin staat en wordt ook met name gebruikt voor tekst-elementen; het neemt de ruimte in die het nodig heeft, maar er kan geen breedte (width) en hoogte (height) ingesteld worden.
• Inline-block: het element wordt naast andere elementen geplaatst als daar ruimte voor is; er kan een breedte en hoogte ingesteld worden.
• Flex: bepaalt hoe de elementen binnen het element getoond worden qua richting, verdeling en uitlijning. Zie flex-opties voor hoe dit werkt.
• Grid: maakt een soort rooster met rijen en kolommen.
• Inline-flex: werkt zoals flex, maar het element gedraagt zich als een inline-element.
• Inline-grid: werkt zoals grid, maar het element gedraagt zich als een inline-element.

Flex-opties

De opties die je instelt voor een element, bepalen hoe de elementen in dat element geplaatst worden. Stel je hebt een box component met een aantal afbeeldingen erin. Dan zijn de flex-opties die je instelt op het box component van invloed op hoe de afbeeldingen worden getoond.

• Direction: bepaalt de richting waarin de elementen erin worden geplaatst; horizontaal  (row) of verticaal (column).
• Wrap: als de rij of kolom vol is, worden de elementen erin in een nieuwe rij of kolom getoond (wrap) of niet (nowrap).
• Justify content: geeft aan hoe de elementen erin horizontaal worden getoond. Met ‘start’ worden ze links getoond, met ‘center’ in het midden en met ‘end’ rechts. De optie ‘between’ verdeelt de elementen erin gelijkmatig over de breedte van het element. Bij ‘around’ krijgen de items links en rechts dezelfde marge; tussen twee elementen zit dus twee keer zoveel ruimte als aan de randen. Bij ‘evenly’ zit er tussen de rand en de elementen en tussen de elementen onderling even veel ruimte.
• Align items: doet ongeveer hetzelfde als justify content, maar dan in verticale richting. Bij align-items is er geen ‘between’ optie, maar wel een optie ‘stretch’. Stretch (wat is de standaard optie voor align items) zorgt ervoor dat de elementen erin ‘uitgerekt’ worden tot de beschikbare ruimte.
• Align content: werkt alleen als er meerdere rijen of kolommen zijn en de elementen naar de volgende regel of kolom gaan. Verder werkt deze optie vergelijkbaar als align items.

‘Justify content’ en ‘align items’ worden vaak gebruikt om een element te centreren.

In onderstaande video zie je hoe de verschillende opties gebruikt kunnen worden. Hierbij is gebruik gemaakt van een box component met een vaste breedte en hoogte in pixels. Ook de afbeeldingen hebben een vaste breedte en hoogte in pixels.

Verplaatsen

Je kunt een element verplaatsen (translate) ten opzichte van hoe het volgens de gebruikelijke flow geplaatst zou worden. Je kunt hiermee een element bijvoorbeeld een stukje laten uitsteken.

Positie

Met de optie positie (position) kun je aangeven waar een element wordt neergezet ten opzichte van een ander element. Hierbij is het belangrijk dat de optie ‘absolute’ alleen toegepast wordt op een element dat geplaatst is in een element met positie ‘relative’; anders wordt het gepositioneerd ten opzichte van het browser venster.

Per zijde kun je een waarde kiezen om de plaats de definiëren. Deze waarden kunnen per apparaat ingesteld worden.

Verhouding

Je kan de verhouding tussen breedte en hoogte (ratio) voor een element instellen. Zo kun je vierkante en rechthoekige elementen creëren. De inhoud van het element wordt automatisch met ‘position absolute’ gepositioneerd. Dit zorgt ervoor dat als je meerdere componenten toevoegt, deze over elkaar heen worden geplaatst. Dit kan je voorkomen door eerst een box of een link component toe te voegen en daarin de componenten toe te voegen.