Binnen deze tutorial gaan we bekijken hoe we een slider kunnen maken en deze aan een website gebouwd op Framework360 kunnen toevoegen. Een slider è een inhoud die meestal wordt toegevoegd aan het eerste deel van de homepage van de website. De slider è bestaat uit een afbeelding, een carrousel van afbeeldingen of een video, en boven de multimedia-inhoud zijn er een titel en een beschrijving.
Stap 1: Laten we onze slider maken
Als eerste gaan we onze slider maken door te klikken op de suboptie in de zijbalk van Framework360 “Slider” en de volgende stappen te volgen:
Website > Slider
Op dit punt verschijnt het scherm waarin alle sliders die we hebben gemaakt aanwezig zullen zijn. Om een nieuwe slider te maken hoeven we alleen maar op de groene knop rechtsboven te klikken “Toevoegen”.
Zodra we binnen zijn in het scherm voor het maken van de slider, voegen we de titel van onze slider toe en stellen we de verschillende instellingen met betrekking tot de slider in die zich onder de sectie voor de titel bevinden.
Laten we nu de verschillende secties analyseren.
SECTIE “OPTIES”
Binnen de sectie “Opties” definiëren we de algemene instellingen van onze slider. Specifiek, bij “Hoogte slider” stellen we de hoogte in die onze slider moet hebben. Bij “Autoplay”, als de slider bestaat uit een carrousel van afbeeldingen, definiëren we of deze automatisch door het systeem moeten worden veranderd na een door ons gekozen tijd; als autoplay niet is ingeschakeld, moet de bezoeker zelf door de afbeeldingen in de slider scrollen. Bij “ Loop” kunnen we beslissen of we de afbeeldingencarrousel opnieuw willen starten zodra alle afbeeldingen zijn weergegeven, of de weergave van de laatste afbeelding willen behouden. Bij de optie “Pijlen” kunnen we beslissen om pijlen aan de rechter- en linkerkant van de slider toe te voegen, zodat de bezoeker handmatig de afbeeldingen kan wijzigen. Ten slotte, door op de knop “Willekeurige volgorde” te klikken, kunnen we de door ons ingevoerde afbeeldingen in een willekeurige volgorde laten weergeven; anders volgt de weergave de volgorde van invoer.
SECTIE “ACHTERGROND”
Als we verder scrollen op de pagina voor het maken van de slider, voegen we in de sectie “Achtergrond” het beeld toe dat onze slider zal vormen. In deze sectie definiëren we bij de optie “Afmeting” de afmeting die het geüploade beeld binnen de slider moet hebben; doorgaans wordt de modus gebruikt cover, dat het mogelijk maakt om op elk type scherm de volledige breedte van het scherm met onze afbeelding te bedekken. Bij de optie “Herhaal” kunnen we beslissen of de afbeelding meermaals moet worden herhaald totdat de hele sectie is bedekt; over het algemeen, door de modus cover in te stellen bij de optie “Grootte”, plaatsen we hier de modus no-repeat. Bij de optie “Positie” kunnen we de positie van de dia bepalen; over het algemeen wordt bij deze optie de modus center-center ingesteld. Bij de optie “Aanhechting” wordt meestal de modus standaard behouden. Ten slotte laden we bij de opties “Bureaublad Afbeelding” en “Mobiele Afbeelding” onze afbeelding voor respectievelijk PC- en mobiele weergave. Als we geen afbeelding voor mobiel invoeren, zal het systeem ook de bureaubladafbeelding voor deze positie weergeven. We raden aan om ook een afbeelding voor mobiele weergave met een vierkante afmeting in te voegen om het laden van de pagina te verlichten wanneer de gebruiker de pagina zonder Wi-Fi-verbinding bekijkt.
SECTIE “VIDEO”
SECTIE “OVERLAY”
Binnen de sectie “Overlay” kunnen we beslissen of we een gekleurde gradient boven de afbeelding of video die we hebben geüpload willen toepassen. Deze keuze kan worden gemaakt via de optie “Gradient”. Als alternatief kunnen we een kleur selecteren via de optie “Kleur”, die bovenop de geüploade inhoud zal worden geplaatst. Vervolgens, door gebruik te maken van de optie “Opaciteit”, kunnen we de opaciteit van de kleur verminderen zodat de onderliggende afbeelding of video zichtbaar wordt.
SECTIE “INHOUD”
Binnen de laatste sectie op het scherm voor het aanmaken van de slider, genaamd “Inhoud”, voegen we met behulp van de klassieke visual builder van Framework360 een titel en een beschrijving toe die op onze slider weergegeven moeten worden.
Eenmaal de realisatie van de slider voltooid is, klikken we op de groene knop rechtsboven “Opslaan” om ons werk op te slaan.
Stap 2: Laten we de slider aan de pagina van onze website toevoegen
Nadat we onze slider hebben gemaakt, zoals gezien in de vorige stap, moeten we deze nu invoegen in de pagina van onze website waar we willen dat deze wordt weergegeven. Om dit te doen, gaan we naar het subitem in de zijbalk “Pagina's” door de volgende stappen te volgen:
Website > Pagina's
Binnen het detailvenster “Pagina's” vinden we de lijst met pagina's die op onze website aanwezig zijn. Op dit punt klikken we op de pagina waar we de slider willen invoegen en, met behulp van de visual builder, selecteren we het blok “Slider” en slepen het naar het gedeelte van de webpagina waar we willen dat het wordt weergegeven, zoals geïllustreerd in de volgende afbeelding:
Eenmaal het blok ingevoegd, gaan we de slider selecteren die we hebben gemaakt.
Tenslotte klikken we op de knop rechtsboven “Opslaan” om de invoer van de slider op te slaan.
