TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget Nivo Slider gratuito per Weebly

14

Weebly offre un semplice elemento di presentazione per l’inserimento di slider nel tuo sito. La presentazione ricca di funzionalità con più effetti di transizione è una delle parti mancanti in Weebly. Molto tempo fa Weebly offriva una presentazione di intestazione per gli utenti Pro che è stata rimossa anche da tutti i temi reattivi. Abbiamo testato vari slider e abbiamo scoperto che il popolare slider Nivo con modifiche sarà il migliore per gli utenti Weebly. Nivo slider è uno dei più noti slider sul web utilizzato su vari temi per impostazione predefinita. Puoi facilmente aggiungere bellissimi effetti di transizione con jQuery e personalizzare gli slider in base alle tue necessità. In questo articolo discuteremo come aggiungere il widget di scorrimento Nivo gratuito nel tuo sito Weebly. Lo slider può essere inserito ovunque sul tuo sito Weebly con la restrizione di uno slider per pagina.

Caratteristiche del widget Nivo Slider

Di seguito sono riportati alcuni dei punti salienti del widget di scorrimento Nivo gratuito per Weebly:

  • Può essere aggiunto come presentazione di intestazione o all’interno dell’area del contenuto. In questo articolo discuteremo dell’inserimento dell’area del contenuto interno, se stai cercando una presentazione di intestazione, dai un’occhiata al nostro articolo separato su come inserire una presentazione di intestazione nel sito Weebly gratuito.
  • Il cursore Nivo è offerto con 4 diversi stili di tema: chiaro, barra, scuro e predefinito.
  • Puoi aggiungere 12 diversi effetti di transizione: affetta in basso a destra, scorri in basso a sinistra, affetta in alto a destra, affetta in alto a sinistra, affetta in alto in basso, affetta in alto in basso a sinistra, piega, dissolvenza, casella casuale, casella pioggia, casella pioggia inversa e casella pioggia ingrandita inversione.
  • Diversi effetti di transizione possono essere aggiunti a ogni singola diapositiva.
  • Facile aggiungere didascalia di testo e didascalia con collegamento. Puoi anche collegare le immagini del dispositivo di scorrimento alla pagina richiesta sul tuo sito.
  • Usa semplici controlli come i pulsanti di navigazione per le diapositive precedenti e successive.

Come aggiungere il widget Nivo Slider nel sito Weebly?

Il cursore demo ha quattro immagini e utilizza l’effetto di transizione definito per ogni immagine separatamente nel codice HTML. La seconda immagine (up.jpg) viene utilizzata come collegamento per connettersi a una pagina Web con un testo di didascalia in basso. La quarta immagine (nemo.jpg) ha una didascalia con link HTML.

Passaggio 1 – Preparare le immagini

Il primo passo per qualsiasi presentazione è preparare le immagini. Nelle demo abbiamo utilizzato 4 immagini con ciascuna di dimensioni 618 x 246 px. Si consiglia di utilizzare un rapporto simile con immagini di dimensioni maggiori per una migliore qualità.

Passaggio 2: scarica i file di scorrimento

Fare clic sul pulsante in basso per scaricare tutti i file richiesti per il dispositivo di scorrimento Nivo, incluse quattro immagini utilizzate a scopo dimostrativo.

Scarica tutti i file nivo slider.

Il file di archivio zip contiene 12 file come di seguito:

Immagini di navigazione

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • caricamento.gif

Script:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Foglio di stile:

  • temi-stili.css

Immagini dimostrative:

  • toystory.jpg
  • su.jpg
  • walle.jpg
  • nemo.jpg

Puoi eliminare le immagini demo e utilizzare le tue sul tuo sito Weebly.

Passaggio 3: caricare i file di scorrimento

Accedi al tuo account Weebly e modifica il sito a cui desideri aggiungere lo slider Nivo. Vai a "Tema > Modifica HTML/CSS" e vai alla sezione "Risorse". Fai clic sul pulsante + e quindi crea una nuova cartella.

Widget Nivo Slider gratuito per Weebly

Creazione di una nuova cartella nell’editor di codice Weebly

In questo esempio, creiamo una cartella denominata "nivo" e carichiamo tutti i 12 file scaricati nel passaggio 2.

Widget Nivo Slider gratuito per Weebly

Caricamento di file in Weebly

Passaggio 4 – Inserimento del codice nella pagina

Ora vai alla pagina in cui desideri aggiungere lo slider Nivo e inserisci il seguente codice utilizzando l’elemento "Embed Code".

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Pubblica il tuo sito per vedere il bellissimo cursore Nivo.

Sebbene il codice sopra possa essere inserito utilizzando l’elemento "Codice da incorporare", si consiglia di aggiungere il collegamento CSS nella sezione "Pagine > La tua pagina > Impostazioni SEO > Codice intestazione".

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

E il JavaScript nella sezione "Pagine> La tua pagina> Impostazioni SEO> Codice piè di pagina".

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Ricorda di sostituire gli URL delle immagini con i tuoi.

Personalizzazione del cursore del livello

Effetto di transizione per le immagini

L’effetto di transizione è controllato utilizzando il parametro "transizione dati" per ogni immagine. Gli effetti casuali verranno utilizzati quando si rimuove il parametro "transizione dati" dal codice HTML. Ad esempio, sotto il codice HTML si otterrà un effetto di transizione casuale con tema scuro.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

È possibile utilizzare uno dei seguenti 12 valori dei parametri di transizione dei dati per ogni immagine sui dispositivi di scorrimento per avere effetti diversi:

  • affettaGiùDestra
  • affettaGiùSinistra
  • affettaSuDestra
  • sliceUpLeft
  • sliceSuGiù
  • sliceSuGiùSinistra
  • piega
  • dissolvenza
  • scatolaCasuale
  • boxPioggia
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Utilizzo di un tema diverso

Il tema per lo slider è definito utilizzando la classe CSS "theme-NAME". Nell’esempio sopra, il tema della barra è stato utilizzato come "barra del tema". Puoi utilizzare uno dei 4 temi sostituendo il nome del tema come di seguito:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Personalizzazione degli stili

Tutti gli stili utilizzati per lo slider sono definiti nel file "theme-styles.css". Ha set di stili per quattro temi e il wrapper di scorrimento. Puoi regolare la larghezza, la dimensione del carattere e il colore delle didascalie in quel file.

Personalizzazione dello script

Fondamentalmente in questo slider vengono utilizzati due script: uno è la libreria jQuery di Google e l’altro è lo script di scorrimento Nivo personalizzato distribuito con licenza MIT. Tutte le variabili di base per il controllo del dispositivo di scorrimento sono definite nel file "jquery.nivo.slider.nod.js" come di seguito nella sezione "//Impostazioni predefinite":

  • effetto: ‘casuale’ – Per impostazione predefinita verranno applicati effetti di transizione casuali
  • fette: 15 – L’immagine è tagliata in 15 pezzi
  • boxCols: 8 – L’immagine è divisa in 8 colonne
  • boxRows: 4 – L’immagine è divisa in 4 righe
  • animSpeed: 500 – La velocità di animazione è predefinita di 500 ms, riduci per spostare la transizione più velocemente
  • pauseTime: 3000 – Tempo di pausa tra le diapositive in 3000 ms
  • startSlide: 0 – La diapositiva iniziale è la prima (0) diapositiva
  • directionNav: true – Mostra i pulsanti di navigazione della direzione (false per nascondere)
  • controlNav: true – Mostra i punti elenco di navigazione di controllo (false per nascondere)
  • controlNavThumbs: false – Nascondi le miniature di navigazione invece dei punti elenco (true to show)
  • pauseOnHover: true – Mette in pausa la presentazione quando si passa il mouse sull’immagine
  • manualAdvance: false – Per impostazione predefinita la rotazione automatica è abilitata, è possibile abilitare lo spostamento manuale delle immagini
  • prevText: ‘Prec’ – Testo immagine precedente
  • nextText: ‘Next’ – Testo dell’immagine successiva
  • randomStart: false – L’avvio casuale è disabilitato

Nota: non rimuovere i commenti sul copyright dal file "jquery.nivo.slider.nod.js". Comprendiamo che lo sviluppatore originale "Dev7Studios" non esiste più e il sito sta reindirizzando a un plug-in di WordPress. Ma mantieni intatto l’avviso per riferimento. Poiché la funzione $ non è più supportata in Weebly, abbiamo sostituito tutti i $ nello script con jQuery.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More