Wat ga je met deze tutorial maken? Je maakt een header slider die de volledige breedte beslaat van het scherm. Plaats je meer slides dan gaat de slider vanzelf animeren.

Stap 1. Item aanmaken

Maak een nieuw item aan. Geef het item een duidelijke naam bijvoorbeeld 'Header slider' en kies bij de dropdown function = Banner.

De overige velden mogen blanco blijven.

Klik op Update item type.

Stap 2. Rij aanmaken

Open het zojuist aangemaakte item in je lijst met items. Klik hiervoor op het edit icoon (sleutel & schroevendraaier).

Klik op row en vul de volgende velden in bij tabblad dim: width = 100%, height = auto, min height = 500, max height = 500. Tabblad text: alignment = center.

Stap 3. Item specificeren

Klik op item en vul de volgende velden in bij tabblad dim: width = 100%, height = auto. Tabblad text: alignment = center.

Klik op Update item type.

Stap 4. Afbeelding en titel aanmaken

Open het zojuist aangemaakte item in je lijst met items. Klik hiervoor op de edit icoon (sleutel & schroevendraaier).

Klik op Add element.

Geef het element bij het veld label een duidelijke naam bijvoorbeeld 'foto' en kies bij de dropdown type = Image.

Klik op default en vul de volgende velden in bij tabblad dim: width = 100%, height = auto. Position: top = 0, left = 0. (door de position op te geven is de afbeelding absoluut gepositioneerd*)

Klik op Update element.

Wil je dat de croptool automatisch het juiste formaat voor iedere afbeelding uitsnijdt in de editor open dan nogmaals het zojuist aangemaakte element. Je ziet nu 2 velden met de titel Crop size geef hier width = 1366, height = 500 in.

Klik op Update element.

Stap 5. Titel toevoegen

De titel is een tekstelement. Open het zojuist aangemaakte item in je lijst met items. Klik hiervoor op de edit tool (sleutel & schroevendraaier).

Klik op Add element.

Geef het element bij het veld label een duidelijke naam bijvoorbeeld 'tekst' en kies bij de dropdown type = Text (multi-line).

Klik op default en vul de volgende velden in bij tabblad dim: width = 683, height = auto. Stel bij margin = -563 in. Tabblad text: alignment = left

Stap 6. Klaar en toepassen

De header slider is nu klaar en kan ingevoegd worden. Klik op het tabblad Items. Beweeg met je muis over het zojuist aangemaakte item. Klik op de grote plus en sleep (drag & drop) het item op de pagina preview in de middelste kolom waar je het item wilt plaatsen op de pagina.

Stap 7. Content toevoegen

Om de header slider compleet te maken met beelden en tekst klik je op het edit icoon van de zojuist toegevoegde rij in de preview kolom. Klik op Add item en voeg een afbeelding toe en tekst. Na klikken op Update item verschijnt de afbeelding en tekst in de preview. Wil je dat de header slider gaat bewegen, voeg dan nogmaals een slider toe door op Add item te klikken. Herhaal deze stap als je meerdere sliders toe wilt voegen aan de header slider.

* Door een item absoluut te positioneren verliest deze de waarde in de hiërarchische volgorde van elementen en neemt dus geen ruimte meer in beslag. Hierdoor kan je bijvoorbeeld een tekst over een foto plaatsen.

Uiteraard is het mogelijk om alle bovenstaande formaten van items en elementen aan te passen naar je eigen voorkeuren en inzicht.