I cursori sono elementi che si possono trovare su quasi tutte le home page dei siti web. Slider Smart 3 è un potente plugin disponibile in versione gratuita e premium.

Le caratteristiche principali di questo plugin

Come funzionalità, offre tra l'altro:

  • Un'interfaccia utente intuitiva
  • Un generatore di pagine video con trascinamento della selezione con Anteprima dal vivo / 8
  • Diapositive dinamiche che possono essere create utilizzando articoli e filtrate per ID o pagine personalizzate
  • Generazione di diapositive (Dinamicamente) da una varietà di social network (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube e altri).
  • Cursori di controllo personalizzabili 
  • Animazioni scorrevoli in background (Ken Burns)

Gratis vs Premium

Se tutto ciò che stai cercando è un cursore di base, Smart Slider 3 è disponibile su WordPress.org nella directory dei plugin. Anche la versione gratuita è impressionante e speciale rispetto ad alcuni degli altri cursori.

Una licenza personale per sito singolo costa solo $ 25 (il rinnovo è a 15 $).

Smart-Slider-Templates

Ci sono alcune differenze chiave tra la versione gratuita e premium in termini di contenuti e funzionalità. Ecco cosa otterrai con la versione premium:

  • Un generatore illimitato di diapositive dinamiche
  • Comandi avanzati
  • Modalità esperto
  • Animazioni in background
  • Un visualizzatore di immagini e un editor
  • Demo di scorrimento 43

Tutorial: creazione di uno slider di base

Se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog.

Una volta attivato, il WordPress Plugin Slider Smart mette il proprio menu nella parte inferiore del pannello di amministrazione di WordPress.

Se non hai mai installato un WordPress Plugin scoprire Come installare un plugin in WordPress

Clicca sul menu Slider smart, si apre l'interfaccia principale dove la prima opzione che vedrai è un grande pulsante verde: " creare Slider » che apre una finestra di configurazione iniziale come vedi sotto.

Smart-Slider-Create-Slider

Da lì puoi nominare il tuo cursore e scegliere uno stile generale. Ci sono molti stili tra cui scegliere (come larghezza intera, pagina intera, carosello, miniatura e altro), ma andremo con un cursore di blocco basato sul layout del nostro sito Web esistente.

Fare clic "Creare" e Slider Smart inizierà a progettare il modello di slider di base. Dopo pochi secondi ti troverai in una pagina che fornisce tutti i dettagli di base sul plugin.

Scopri Come creare una politica sulla privacy su WordPress

La prima cosa da notare qui è la sezione " pubblicare Slider". Dovrai utilizzare uno di questi tre metodi (Shortcode, editor di pagine o post o codice PHP) quando arriva il momento di pubblicare la tua diapositiva (n ° 1 in basso). Prima di poterlo fare, dobbiamo creare delle diapositive.

È qui che il plugin dimostra davvero la sua facilità d'uso.

Tutto quello che devi fare è fare clic sul pulsante verde " Aggiungi diapositiva Immagine "(n ° 2 in basso) e la tua libreria multimediale si aprirà. Da lì puoi selezionare tutte le immagini che desideri oppure iniziare con una sola, quindi fare clic su " Seleziona Nella finestra del catalogo multimediale.

Smart-Slider-Nuovo diapositive

Nota: Non sei limitato alle immagini quando selezioni la diapositiva. Puoi anche utilizzare video o articoli, nonché creare diapositive vuote, statiche o persino dinamiche.

consultare Come duplicare (copiare) le tue pagine su WordPress: il tutorial

Smart Slider carica la diapositiva nell'interfaccia e sei pronto per salvare e pubblicare o iniziare a personalizzare. Tuttavia se pubblico la mia presentazione funzionerà bene ma non è proprio quello che stavo cercando, come puoi vedere nell'immagine qui sotto.

Smart Slider fuori centro 1

Per correggere ciò sono andato al menu "Taglia" e sono passato alla sezione modalità reattiva. La selezione è stata "Intera larghezza", quindi ho scelto "Auto" e salvato i miei progressi. Da lì, sono tornato al " generale "e un allineamento centrale selezionata.

Smart-Slider-Size-Change

Quando parlo di facilità d'uso qui, tienilo a mente l'intero processo ha richiesto meno di 5 minuti per il mio primo tentativo.

Ora è il momento di lavorare sulla diapositiva stessa. Quando passi con il mouse sulle diapositive nella visualizzazione, noterai che nell'angolo in alto a sinistra appare una casella verde. Come avrai intuito, facendo clic su questa diapositiva verrà contrassegnata come la prima della sequenza.

Vedi anche 5 eccellenti plugin WordPress premium per aggiungere un cursore

Con il mio cursore creato e lo sfondo a posto, era il momento di aggiungere alcuni contenuti e transizioni. Per eseguire questo passaggio, ho semplicemente fatto clic sulla diapositiva che volevo modificare che va alla sezione dei livelli.

Ci sono molte impostazioni individuali nel pannello di destra, ma se scorri verso il basso troverai un'immagine della tua diapositiva. È quindi possibile fare clic su uno degli elementi nel pannello di sinistra per posizionarli sulla diapositiva.

Smart-cursore-Elements

La creazione di queste diapositive è un'altra scuola. Ci sono così tante opzioni disponibili. Per darti un'idea di quanto sia flessibile questo plugin, dai un'occhiata a cosa può fare ogni elemento per il tuo cursore tramite:

  • Un menu di voci
  • Divertimento
  • Impostazioni del livello

In ciascuno di questi menu, ci sono più sottomenu. Ad esempio, quando si crea un elemento di testo, è possibile regolare le impostazioni dei caratteri come: 

  • Le famiglie di font
  • Il colore del testo
  • dimensione dei caratteri
  • L'altezza della linea
  • La decorazione del testo
  • Allineamento
  • Spaziatura tra lettere e parole
  • Impostazioni di modifica del testo
  • Ombra del testo

Ogni elemento di testo sul dispositivo di scorrimento può avere impostazioni uniche, animazioni uniche e impostazioni di sincronizzazione proprie. C'è anche una sezione per il CSS personalizzato.

Man mano che aggiungi elementi e animazioni alla diapositiva, nella versione pro noterai anche una funzione di calendario, che ti consente controllare il tempo di visualizzazione dei singoli elementi e la durata delle loro animazioni utilizzando semplici barre di scorrimento.

Mi stavo affidando a questa funzione quando ho aggiunto diversi livelli per questa diapositiva un po 'più tardi.

Smart-Slider-Timeline

Aggiunta di livelli e animazioni

Con il nostro cursore in posizione e lo sfondo installato, è il momento di introdurne alcuni différents elementi e strati. Inizieremo aggiungendo un'immagine di un pupazzo di neve alla diapositiva. Per fare questo vado al menu "Livelli" e cliccare su " Immagine ". Questo posizionerà un'immagine immaginaria sulla diapositiva.

Scopri anche Come configurare il plugin WordPress Slider Revolution

Da lì, puoi fare clic sull'immagine fittizia in basso a sinistra, quindi selezionare e ridimensionare l'immagine nella libreria multimediale.

Smart-Slider-Image-Element-Resize

Dopo aver scelto, inserito e ridimensionato la mia immagine, è il momento di aggiungere un'animazione di base che può essere eseguita in pochi passaggi.

Il primo è selezionare la scheda "Animazioni" come si vede sotto. Una volta terminato, faremo clic sul pulsante verde dell'animazione "Nel".

Smart-Slider-animazioni

La schermata successiva è dove posso scegliere la mia animazione e regolare la pianificazione. Per questa particolare diapositiva, introduco un'animazione "DESTRA" e aumento la durata a 2200 ms.

Stai cercando un ftp per gestire i tuoi file e cartelle WordPress, scopri Come utilizzare FTP su Windows 10

Aggiungerò anche un ritardo di 300 ms. Nella parte inferiore di questa schermata c'è un'opzione per avere un evento specifico e un trigger per quell'animazione, come un passaggio del mouse o un clic nella diapositiva. Non complicherò le cose con queste impostazioni per questo esempio.

Smart-slider-In-animazione-Settings

Quindi aggiungerò del testo. Seguendo la stessa procedura di cui sopra, fai clic sull'elemento " aggiungere testo E apporta le modifiche necessarie. Ho inserito il testo e poi sono andato alle impostazioni del carattere dove ho cambiato la dimensione e il colore.

Aggiungo un'animazione " Fade In E ha regolato il calendario in modo che inizi subito dopo l'animazione del pupazzo di neve.

Noterai anche in questo menu che c'è la possibilità di avere testo specifico per tablet e dispositivi mobile. Questo è un ottimo esempio dei tipi di funzionalità che rendono questo plugin così flessibile e intuitivo.

In alcuni "altri" dispositivi di scorrimento, sarei stato costretto a utilizzare una media query e un CSS personalizzato.

Text-Layer-Opzioni Smart-Slider-

Infine, aggiungo altri due strati. Il primo è un livello di testo e il secondo è un livello di immagine. Di nuovo, sto seguendo lo stesso identico processo di cui sopra, ma ho preso un po 'di più nella tempistica dell'animazione. Puoi vedere i risultati finali di seguito.

Tutto sommato, la creazione di questa diapositiva è stata un processo di minuti 20.

Nota: Converti questa diapositiva in GIF modificherò alcune scadenze delle bellissime animazioni selezionate che ho accuratamente assemblato.

Ecco ! Dopo aver provato molti plugin WordPress di slider, sia gratuito che premium, posso dire onestamente che questo è uno dei migliori che abbia mai provato. Non è solo una caratteristica specifica che lo rende unico. È una combinazione di cose che mostrano quanto sia semplicemente un ottimo plugin.

È importante notare che non ho coperto ogni singola funzionalità.

Scopri anche Come sapere quale tema viene utilizzato su un blog WordPress

Sono sicuro che se passassi un po 'più di tempo a lavorare con questo plugin, troverei alcune cose che vorrei cambiare, e forse anche qualche bug. Penso che la facilità d'uso mantenga le persone lì abbastanza a lungo da poter finalmente sfruttare appieno la moltitudine di funzionalità offerte. E credimi, ce ne sono molti.

Scarica Smart Slider 3

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. WooCommerce Page Builder

WooCommerce Page Builder è un WordPress Plugin molto popolare che offre un numero abbastanza consistente di shortcode e che ti permette di creare diversi tipi di pagine personalizzate (prodotto, carrello, checkout, “il mio account”) sul tuo sito web WooCommerce. È un'estensione di plug Compositore visiva che è necessario installare in anticipo.WooCommerce-page-builder

Grazie a questo plugin, avrai la possibilità di creare siti web di e-commerce unico utilizzando qualsiasi tema WordPresse ti fanno guadagnare un sacco di soldi.

Download | Demo | Web hosting

2. Elementor

Lanciato originariamente nel 2016, il plugin Elementor per WordPress è uno dei più giovani page builder in questo elenco. Nonostante il suo inizio tardivo, Elementor ha rapidamente collezionato oltre 1 di installazioni attive su WordPress.org, rendendolo uno dei Costruttori visivi delle pagine WordPress più popolari.

elementor pro e1544277036401
Ciò che rende la sua reputazione è la sua interfaccia visiva fluida, le sue diverse opzioni di stile e altre potenti funzionalità come la creazione completa di Temi WordPress.

La sua interfaccia è divisa in due parti principali, con una terza zona per determinati parametri. La versione gratuita di Elementor offre widget gratuiti per 28. La versione Pro produce altri widget 30, per un totale di widget 58 nella versione Pro. La versione gratuita include circa modelli gratuiti 40, mentre la versione Pro offre centinaia di modelli aggiuntivi.

 Download | Demo | Web hosting

3. Ninja Popups

Con oltre 30 vendite e una valutazione di 000 stelle, Ninja Popups è uno dei plugin di WordPress i più popolari disponibili su Code Canyon.

I plugin wordpress Ninja Popups creano pop-up pop-up opt-in

Oltre a una vasta gamma di modelli per una varietà di utilizzo, include anche diverse funzionalità come: un visual builder di Popup, 10 diverse posizioni di visualizzazione per i popup, 74 diversi effetti di animazione, supporto della tecnologia anti-blocco per bypassare i blocchi degli annunci, una varietà di opzioni di targeting, statistiche nel cruscotto, blocco dei contenuti per e-mail opt-in o condivisione sui social media, tonnellate di integrazioni con servizi di email marketing e altro ancora.

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial e spero che ti aiuti a creare facilmente slider o diapositive con l'aiuto di Plug-in Smart-Slider per WordPressSe ti è piaciuto, non esitare condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...