Slider e caroselli possono impattare in modo positivo o negativo l'esperienza dei tuoi visitatori e in particolare i tempi di apertura e di velocità del tuo sito web.

In questa lezione vedremo come si creano e quali possono essere i casi in cui ha senso inserire questo tipo di jet.

Innanzitutto, cosa sono? Lo sappiamo benissimo degli slider sono delle classiche presentazioni.

Nella maggior parte dei casi si vedono nelle homepage dei siti web che attraverso ha dei controlli e delle frecce.

Si si può scorrere tranquillamente tra varie immagini che possono essere di background o presentazioni piuttosto che altre tipologie.

I caroselli sono molto conosciuti grazie anche a Instagram, sono una sorta di presentazione dove nella maggior parte dei casi sono delle semplici foto e si utilizza nella maggior parte dei casi nei siti web per presentare delle foto gallery come si creano su elemento.

Allora ci sono due il primo che vi mostro si chiama slide ed è questo qua è un abbastanza leggero se vogliamo, perché in commercio ci sono diversi plugin, uno tra tutti revolution slider, che è un plugin molto potente per creare slide molto molto avanzate di qualsiasi tipologia.

Ho avuto modo di provarlo in diversi progetti anni fa, ma reputo che sia molto macchinoso e soprattutto molto pesante.

Tradotto significa che se inserito su una homepage o su qualsiasi altra pagina web, potrebbe penalizzare e rallentare molto il sito web, ragion per cui nel corso degli anni ho abbandonato quel plugin, mentre questa soluzione di elemento per creare degli slider non è più non è male.

Um è piuttosto buona, è è leggera, è veloce.

I tempi di caricamento sono sono sono ottimi e quindi può essere una buona soluzione se vuoi utilizzarla nelle tue pagine web.

Abbiamo visto, quindi è sufficiente con il drop trascinare il slide.

Una volta che avrete inserito il potete andare a la pe- a personalizzare i vari elementi.

Ad esempio um titolo slide uno.

Avete la possibilità di inserire uno sfondo, quindi, come ad esempio una immagine.

Potete ovviamente modificare il contenuto e il il Il titolo è il sottotitolo potete inserire un pulsante, quindi inserire un pulsante personalizzato con un link di destinazione ed in più potete anche definire uno stile per quanto quanto riguarda ad esempio l'allineamento il colore del contenuto l'ombra del testo, insomma, c'è veramente di tutto.

Quindi qui vi invito chiaramente a eventualmente studiare con con attenzione tutti questi elementi, basta prestare un po' di attenzione, ma è tutto abbastanza intuitivo e sicuramente può essere un buon metodo se vuoi inserire delle slide da qualche parte.

Una cosa interessante è che una volta che hai definito lo stile della prima slide, puoi tranquillamente clonarlo attraverso questa funzione per poi andare nelle altre slide a cambiare semplicemente solo il l'immagine, magari il testo ed eventualmente il link.

Quindi hai già la base con il tuo preset di stile già definito.

Ci sono delle impostazioni legate all'altezza, quindi um puoi definire l'altezza per i vari dispositivi desktop, tablet e mobile.

Nelle opzioni slider puoi utilizzare solamente delle frecce.

Se vuoi puoi utilizzare i punti sotto, insomma varie varie personalizzazioni per questo per questo alla tav dello stile puoi definire la larghezza del contenuto se c'è un padding e un rientro in pixel ed eventualmente varie vari allineamenti per quanto riguarda la posizione orizzontale e verticale e ovviamente anche l'allineamento del testo.

Poi, entrando nel dettaglio puoi personalizzare lo stile del titolo, quello della descrizione, lo stile del pulsante, quindi qui chiaramente date spazio alla vostra creatività, quindi questo è sicuramente un ottimo strumento.

Ve lo faccio vedere anche in girò la pagina.

Eccolo qua.

È sicuramente un ottimo metodo per mostrare delle slide.

Come vedete sono molto reattive, snelle e veloci, quindi se volete inserire delle slide con elemento, sicuramente questa la migliore soluzione.

Quindi evitate qualsiasi tipo di plugin di terze parti che andrà sicuramente a appesantire le le pagine del vostro sito web.

Quali sono i casi in cui utilizzare slider? Allora qui il web diciamo che si divide il web.

Il mondo del web design, diciamo si divide in due parti.

Ci sono web designer o anche clienti o professionisti che si schierano da una parte di quelli che vogliono le slide a cui piacciono le slide, specialmente in homepage e da una parte i gli altri che non a cui non piacciono le slide, preferiscono utilizzare altri metodi, come ad esempio le htin e io sono uno di questi.

Perché? Perché diciamo che abbiamo visto che uno slider, specialmente quando ci sono molte immagini.

Ad esempio andiamo ad inserire tre, quattro cinque sei immagini vanno comunque ad appesantire la dimensione e il peso della pagina, quindi facendo dei co- dei calcoli, se inseriamo cinque immagini da duecento K l'una chiaramente arriviamo a un mega, quindi diciamo che iniziamo col piede sbagliato per quanto riguarda il peso della pagina, perché poi c'è tutto il resto.

Se ci concentriamo solo nella prima parte, già arriviamo ad un peso della pagina ad un mega.

Sicuramente qualcosa è da rivedere, quindi devi chiaramente fare queste considerazioni.

Lo stesso per quanto riguarda l'inserimento di un video in background in homepage.

Chiaramente, se tu decidi di mettere uno slider con cinque immagini nell'homepage o mettere un video in background che ti va a pesare quei due o tre quattro o anche cinque mega, devi essere consapevole e mettere in preventivo che non avrai mai dei risultati super ottimali nei punteggi di velocità di Google page peat.

Però chiaramente lo devi.

Devi essere consapevole di questa cosa, però se il tuo obiettivo è mostrarlo in quel modo, dici okay.

Io comunque voglio mostrarlo così perché è il mio format creativo e voglio mostrare l'homepage con una determinata pagina in quel modo sono disposto e consapevole di non ottenere massimo dei punteggi e comunque mi va bene sostanzialmente.

Quindi diciamo che devi fare delle scelte in base al mio metodo di lavoro.

Io consiglio sempre in in linea generale in tutte le pagine del sito web, ma specialmente in homepage, di usare poco gli slider e piuttosto utilizzare delle section.

Le action sono delle delle immagini di copertina creative che voi andate a personalizzare ad hoc ed è la parte diciamo più importante quando l'utente entra nella pagina e nella maggior parte dei casi sono costituiti da un'immagine un un quindi un titolo, un sottotitolo e una quindi un pulsante possono essere costituite da un'immagine di background un testo a sinistra un'immagine destra o viceversa.

Però diciamo che la linea che io seguo un po' da da qualche anno è proprio questa qui quella di utilizzare hero action che magari andrò aggiornare nel tempo.

Quindi se ad esempio ho un e-commerce l'andrò ad aggiornare ogni settimana con nuove offerte nuovi prodotti, quindi faccio vedere anche ai visitatori che c'è dinamicità e aggiornamento dietro um oppure c'è la è è uscito un nuovo servizio, un nuovo prodotto, quindi costantemente vado ad aggiornare questa hero section e diversamente invece quindi con le slide puoi tenere anche sempre attive quelle tre quattro cinque slide, però chiaramente devi essere consapevole che un pochino andranno ad impattare nelle performance del tuo sito web quindi devi fare un po' delle scelte.

Sicuramente con elemento hai questa possibilità molto snella e veloce da da produrre e ed è sicuramente anche uno dei metodi più leggeri per creare slider.

Poi voglio mostrarti anche il carosello chiamato carosello immagini che non è altro che appunto un carosello per mostrare delle gallerie di immagini.

Come prima cosa dovrai selezionare e aggiungere le immagini che vuoi aggiungere al tuo carosello.

Ora io semplicemente aggiungerò queste immagini di test inserisci galleria e poi ci sono diverse opzioni, come ad esempio la possibilità di aumentare la dimensione del adesso.

Speriamo il caricamento.

Eccolo qua la possibilità di definire una dimensione di come viene mostrata l'immagine se è piena oppure se vuoi lasciare che il jet la ridimensioni automaticamente.

Ad esempio medium trecento per trecento, quindi esattamente un quadrato, oppure lasciare l'immagine piena, ovvero erediterà il sistema la l'immagine di default di come l'hai caricata slide da visualizzare puoi decidere se visualizzare ad esempio tre slide piuttosto che due e così via, eh? Quante slide vuoi scorrere, quindi va benissimo.

Nella maggior parte dei casi lascio su predefinito, però magari potresti anche decidere di scorrere quattro slide alla volta, poi puoi estendere l'immagine, quindi apri uno schermo.

Puoi utilizzare sia frecce laterali, ma anche frecce, punti o solo punti oppure niente.

Puoi personalizzare anche l'icona, quindi anche questa è una cosa molto interessante perché hai la possibilità di modificare lo stile dei pulsanti, come ad esempio in questo caso ho cambiato l'icona a sinistra questa qua puoi inserire un link, un u r l personalizzato alla alla slide, se preferisci.

Poi ci sono delle opzioni aggiuntive.

Il lode è semplicemente una tecnica per far caricare questo elemento solo quando è effettivamente disponibile, quindi solo quando l'utente atterrerà in quella determinata sezione, quindi con contribuirà ad aumentare le performance generali della pagina l'auto.

Quindi se le immagini di del carosello devono scorrere automaticamente um pausa il passaggio del mouse pausa sull'interazione la velocità delle slide se si deve riprodurre all'infinito la velocità dell'animazione e anche la direzione se verso destra o versa verso sinistra ha la voce dello stile, può decidere se le frecce devono essere mostrate all'esterno o all'interno.

A me personalmente piacciono più frecce mostrate esternamente la loro dimensione e ovviamente anche il colore.

In questo caso, um la paginazione.

Quindi la paginazione qui sotto può decidere lo stile e una cosa? Una delle cose più importanti, secondo me è la spazzatura perché di default elemento le posiziona attaccate, mentre in questo caso tu puoi anche decidere la spaziatura tra i vari elementi, come in questo caso.

Adesso io andrò ad impostare trenta pixel, vado ad aggiornare tutto quanto e ti mostrerò in fronte il risultato finale.

Qui ho inserito un'icona diversa, però poi dopo la andrò a sostituire.

Però intanto è per mostrarvi il funzionamento di questi caroselli che sono molto molto interessanti e sicuramente um puoi utilizzarli quando devi presentare sicuramente delle gallery di prodotti, servizi, foto personali carosello con i contenuti dei clienti, quindi informazioni di questo tipo, ma potrebbe essere anche interessante quando devi presentare elementi del portfoglio, magari all'interno del tuo portfoglio vuoi mostrare delle semplici schermate di risultati raggiunti dal cliente? È molto meglio inserire un carosello di questo tipo dove l'utente andrà a scrollare orizzontalmente piuttosto che andare a inserire tante immagini una sotto all'altra.

Quindi diciamo che in linea generale gli slide che abbiamo visto prima si utilizzano prevalentemente nelle homepage dei siti web, vanno usate con cautela e probabilmente andranno a rallentare un po' il tuo sito web.

Ma se proprio vuoi inserirle.

Devi essere consapevole che potrai perdere un po' di punteggio sulla velocità um di inside di Google.

I caroselli invece sono molto utili e interessanti per mostrare varie immagini con un format diverso, quindi far scrollare l'utente orizzontalmente piuttosto che verticalmente in tutta la pagina web.