Wat ga je met deze tutorial maken? Je maakt een rij met logo's met een vaste breedte. De rij beslaat 100% van de breedte van het scherm. Als er meer logo's zijn dan passen in de breedte van het scherm dan gaan deze automatisch verspringen naar het volgende logo.

Stap 1. Item aanmaken

Maak een nieuw item aan. Geef het item een duidelijke naam en kies bij single item = logo en bij de dropdown function = Carousel.

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 de edit tool (sleutel & schroevendraaier).

Klik op row en vul de volgende velden in bij tabblad dim: width = 100%, height = 150, padding boven = 20, padding onder = 20.

Stap 3. Item specificeren

Klik op item en vul de volgende velden in bij tabblad dim: width = 150, height = auto.

Klik op Update item type.

Stap 4. Afbeelding aanmaken

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

Klik op Add element.

Geef het element bij het veld label een duidelijke naam en kies bij de dropdown type voor Image.

Klik op default en vul de volgende velden in bij tabblad dim: width = 100%, height = auto.

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 = 258, height = 130 in.

Klik op Update element.

Stap 5. Interactief maken

Maak twee elementen. Klik hiervoor op Add element. Geef een naam is bij label = volgende. Kies bij type = Custom layout. En vink aan Row element. Klik op default en vul de volgende velden in bij tabblad dim: width = 20, height = 20 en position = 20 pixels left. Klik op default en vul de volgende velden in bij tabblad act: function = next slide. Geef een naam is bij label = vorige. Kies bij type = Custom layout. En vink aan Row element. Klik op default en vul de volgende velden in bij tabblad dim: width = 20, height = 20 en position = 20 pixels left. Klik op default en vul de volgende velden in bij tabblad act: function = next slide.

Stap 6. Klaar en toepassen

De 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.

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