All’interno di questo tutorial andremo a vedere come creare uno slider ed aggiungerlo ad un sito web costruito su Framework360. Uno slider è un contenuto che viene generalmente aggiunto nella prima parte della home page del sito web. Lo slider è composto da un'immagine, un carosello di immagini o un video, e al di sopra del contenuto multimediale vi sono un titolo e una descrizione.
Step 1: Creiamo il nostro slider
Per prima cosa andiamo a creare il nostro slider cliccando sulla sottovoce della sidebar di Framework360 “Slider” seguendo i seguenti passaggi:
Sito web > Slider
A questo punto si aprirà la schermata in cui saranno presenti tutti gli slider da noi realizzati. Per creare un nuovo slider non dovremmo fare altro che cliccare sul pulsante verde in alto a destra “Aggiungi”.
Una volta all’interno della schermata di realizzazione dello slider andiamo ad aggiungere il titolo del nostro slider e settare le varie impostazioni relative allo slider presenti nelle sezioni poste al disotto della sezione dedicata al titolo.
Andiamo ora ad analizzare le varie sezioni.
SEZIONE “OPZIONI”
All’interno della sezione “Opzioni” definiamo le impostazioni generiche del nostro slider. Nello specifico, alla voce “Altezza slider” impostiamo l’altezza che dovrà avere il nostro slider. Alla voce “Autoplay”, qualora lo slider sia composto da un carosello di immagini, definiamo se queste devono essere cambiate automaticamente dal sistema dopo un tempo scelto da noi; non attivando l’autoplay, dovrà essere il visitatore a scorrere le immagini inserite nello slider. Alla voce “Loop” possiamo decidere se far ripartire il carosello di immagini una volta che sono state tutte visualizzate o far rimanere la visualizzazione dell’ultima immagine. Alla voce “Frecce” possiamo decidere se aggiungere delle frecce a destra e a sinistra dello slider in modo che il visitatore possa cambiare manualmente le immagini. Infine, cliccando sul pulsante “Ordine casuale” possiamo far visualizzare le immagini da noi inserite in un ordine casuale; in caso contrario, la visualizzazione seguirà l’ordine di inserimento.
SEZIONE “SFONDO”
Continuando a scorrere nella pagina di creazione dello slider, nella sezione “Sfondo” inseriamo l’immagine che comporrà il nostro slider. In questa sezione, alla voce “Dimensione”, definiamo la dimensione che dovrà avere l’immagine caricata all’interno dello slider; generalmente viene utilizzata la modalità cover, che permette di coprire su qualsiasi tipologia di schermo l’intera larghezza dello schermo con la nostra immagine. Alla voce “Ripeti” possiamo decidere se l’immagine dovrà ripetersi più volte fino a coprire l’intera sezione; generalmente, mettendo la modalità cover alla voce “Dimensione”, qui inseriamo la modalità no-repeat. Alla voce “Posizione” possiamo decidere la posizione della slide; generalmente, a questa voce viene inserita la modalità center-center. Alla voce “Attaccamento” solitamente viene lasciata la modalità predefinita. Infine, alle voci “Immagine Desktop” e “Immagine Mobile” carichiamo la nostra immagine per la visualizzazione rispettivamente da PC e da cellulare. Se non inseriamo l’immagine per mobile, il sistema farà visualizzare l’immagine desktop anche per questo posizionamento. Noi consigliamo di inserire anche un’immagine per la visualizzazione mobile con una dimensione quadrata in modo da alleggerire il caricamento della pagina quando l’utente visualizzerà la pagina senza una connessione Wi-Fi.
SEZIONE “VIDEO”
Se, invece, volessimo che all’interno del nostro slider sia visualizzato un video e non un’immagine, all’interno della sezione “Video”, alla voce “Video Sfondo”, inseriamo il link di un video di YouTube o Vimeo che verrà visualizzato come background sul nostro slider. Sempre all’interno della sezione “Video”, alla voce “Al completamento del video”, definiamo se alla fine del video si debba ripartire la riproduzione del video, nascondere il video o fermarlo sull’ultimo frame. Infine, alla voce “Visualizza su” possiamo decidere se far visualizzare il video sia su desktop, tablet e mobile o nascondere la visualizzazione del video in qualcuno di questi posizionamenti.
SEZIONE “OVERLAY”
All'interno della sezione “Overlay”, possiamo decidere se applicare un gradiente colorato sopra l'immagine o il video che abbiamo caricato. Questa scelta può essere effettuata tramite la voce “Gradiente”. In alternativa, possiamo selezionare un colore tramite la voce “Colore”, che verrà sovrapposto al contenuto caricato. Successivamente, utilizzando la voce “Opacità”, possiamo ridurre l'opacità del colore in modo da far visualizzare l'immagine o il video sottostante.
SEZIONE “CONTENUTO”
All’interno dell’ultima sezione presente nella schermata di creazione dello slider, chiamata “Contenuto”, mediante il classico visual builder di Framework360, aggiungiamo un titolo e una descrizione che dovranno essere visualizzate sul nostro slider.
Una volta completata la realizzazione dello slider, clicchiamo sul tasto verde in alto a destra “Salva” per salvare il lavoro.
Step 2: Aggiungiamo lo slider alla pagina del nostro sito web
Dopo aver realizzato il nostro slider, come visto nello step precedente, ora dobbiamo inserirlo nella pagina del nostro sito web dove desideriamo che sia visualizzato. Per fare questo dobbiamo recarci nella sottovoce della sidebar “Pagine” seguendo i seguenti passaggi:
Sito Web > Pagine
All’interno della schermata di dettaglio “Pagine”, troveremo l’elenco delle pagine presenti nel nostro sito web. A questo punto, clicchiamo sulla pagina dove desideriamo inserire lo slider e, utilizzando il visual builder, selezioniamo il blocco “Slider” e trasciniamolo nella sezione della pagina web dove vogliamo che sia visualizzato, come illustrato nella figura successiva:
Una volta inserito il blocco andiamo a selezionare lo slider da noi creato.
Infine, clicchiamo sul pulsante in altro a destra “Salva” per salvare l’inserimento dello slider.
