Responsive multi layer banner

afbeelding van Developmentteam

Handleiding van de wide banner op deze site.

De wide banner haalt zijn informatie uit blokken. Als je op de blokken pagina kijkt zie je een regio die Wide Banner heet. Elk blok dat in deze regio geplaatst wordt, word automatisch vertaald naar een brede banner.

Stap 1. Foto's erin zetten.

  • Klik op het foto icoon in ckeditor en zet er net zoveel foto's in als je wilt. 

(zet ondering nog even de ckeditor op full html anders worden de fotos niet zichtbaar.

Stap 2. De volgorde. 

De bovenste foto zit acherin de onderste foto zit voorop. Dit is belangrijk als fotos elkaar gaan overlappen.

Stap 3. Bekijk je werk.

Het blok is standaard zichtbaar op elke pagina's, mits er geen ander widebanner blok ook al op die pagina aanstaat.

Als je je blok opslaat, kun je onderin nog aangeven op welke pagina's deze banner getoond moet worden. Je kunt het even leeg laten en naar een pagina zonder banner gaan. Daar zou deze dan zichtbaar moeten worden.

Stap 4. Positioneren.

Zoals je ziet staan de fotos nog niet op de juiste posities. Dat is eenvoudig aan te passen.

  • Ga weer naar de blokken lijst en open het blok voor bewerken. (handig om in een aparte tab te laten staan.)

Je ziet de foto's daar nu staan. Klik rechts op een foto om de foto te bewerken. Je ziet iets als dit:

  • HSpace hier kun je een getal van 0 tot 100 invullen om de horizontale positie in te stellen.
  • VSpace hier kun je een getal van 0 tot 100 invullen om de verticale positie in te stellen. 
  • je kunt ook de uitlijning rechts kiezen, dan zal de foto rechts en aan de onderkant uitlijnen. (verschoven over hspace en vspace)

De plaatjes staan in een rechthoek die groter is dan wat je meteen ziet. Daarom is alles na 41 precies zichtbaar.

  • Sla weer op om de positie te controleren.

stap5. Dimensioneren

Sommige plaatjes zul je te groot hebben geupload. Het beste is die alsnog de juiste maat te maken.
Als alternatief kun je bij de breedte of hoogte ook een percentage invullen.

  • Vul bijvoorbeeld 50% om de foto te verkleinen.

Voorbeeld

je ziet hier een boompje dat als 150x180 afgebeeld wordt. Op 20% van links en 75% vanaf boven.

Hier zie je de ballon hoogtes


Technisch.

je kunt in de alt text het woord herhaal of repeat zetten. Dan weet de widebanner dat deze foto repeat-x moet krijgen.

je kunt in de style een background color meegeven zoals "background-color:black;" (vergeet de ; niet).

je kunt in het id een waarde opnemen. De widebanner zal die foto dan niet als background maar als gewoon plaatje neerzetten.

Met css kun je dat plaatje dan animeren of stylen.

De code zit in mit_widebanner.. in de tpl directory.

shadow