La guida completa all'utilizzo di SmartVideo con Divi Builder per l'hosting video WordPress
Pubblicato: 2020-09-26Per gli utenti di Divi Builder, SmartVideo ti offre lo strumento di cui hai bisogno per fornire un'esperienza di riproduzione video moderna, professionale e nativa sul tuo sito web.
Viviamo nell'era dei potenti temi WordPress e dei page builder che ti aiutano a creare qualsiasi sito Web sotto il sole. Uno di questi temi e creatori di pagine visive è Divi Builder dalla gente fantastica di Elegant Themes.
Se sei un utente giurato di Divi Builder, adorerai il post di oggi. Tra pochi minuti ti mostreremo esattamente come utilizzare SmartVideo di Swarmify insieme a Divi Builder.
Ora non è più necessario utilizzare i video player carichi di link di Vimeo o YouTube sul tuo sito. Ti offriamo un lettore video privo di ingombri che sembra assolutamente fantastico sul tuo sito Web basato su Divi.
Quali sono i vantaggi diretti?
- Il lettore video SmartVideo non contiene marchi di terze parti (ciao, YouTube) e collegamenti che sottraggono il traffico che lavori così duramente per indirizzare al tuo sito. Ora puoi marchiare i tuoi lettori video per un aspetto nitido e professionale :)
- La nostra CDN video e la tecnologia proprietaria EdgeAI ti consentono di offrire video super veloci, senza buffer e senza errori ai visitatori del tuo sito Web, indipendentemente da dove si trovino nel mondo. I tuoi utenti ti ringrazieranno.
- Usiamo la stessa infrastruttura che usano colossi di streaming come Netflix e Hulu perché siamo completamente impegnati nella nostra missione. Di conseguenza, ti godi video con avvio istantaneo e senza stallo che ti aiutano a trattenere più visitatori e aumentare le tue entrate.
- La nostra soluzione di codifica video fa il culo, il che significa che i visitatori del tuo sito Web godono di una riproduzione video di alta qualità indipendentemente dal dispositivo che utilizzano. Dì addio ai video imprecisi che sembrano terribili su schermi e risoluzioni diversi.
- E molto altro ancora, come imparerai più avanti nell'articolo :)
Per ora, impariamo di più sul Divi Builder e su come integrarlo con SmartVideo.
Avviso spoiler: puoi aggiungere manualmente il codice SmartVideo al tuo sito Web Divi Builder, ma ora puoi saltare tutte le questioni tecniche con il nostro nuovo plug-in SmartVideo per WordPress. Ciò significa che puoi integrare facilmente SmartVideo con Divi Builder anche se non puoi programmare per salvarti la vita.
Cos'è Divi Builder?
Se sei nuovo, Divi è un bellissimo e potente generatore di temi e pagine visive per WordPress. Grazie alla tecnologia avanzata di visual builder, Divi ti aiuta a creare rapidamente fantastici siti Web WordPress.
Divi viene fornito con un sacco di layout predefiniti che puoi importare nella tua installazione di WordPress con un solo clic. Inoltre, hai Divi Visual Builder che ti consente di personalizzare il tuo sito Web trascinando e rilasciando elementi.
Esatto, non sono necessarie conoscenze di programmazione precedenti per creare un sito Web straordinario con Divi. Se ciò non bastasse, puoi persino utilizzare due layout diversi contemporaneamente, offrendoti molta libertà di progettazione.
Divi viene fornito con un sacco di incredibili funzionalità tra cui:
- Oltre 40 elementi del sito Web come pulsanti di invito all'azione, gallerie, moduli, blog, slider, testimonianze ecc.
- Oltre 800 progetti prefabbricati in diverse nicchie come affari, e-commerce, tecnologia, salute ecc.
- Controllo completo della progettazione
- Design reattivo al 100% con impostazioni aggiuntive per tutti i tipi di dispositivi
- Controllo CSS personalizzato
- Una vasta libreria di effetti, transizioni e stili
- Un milione e una possibilità di design
- E molto di più!
La parte migliore è che quando acquisti Divi, accedi ad altri temi e plugin di WordPress. Elegant Themes ha oltre 700.000 clienti, quindi sei in buone mani.
"Divi è il RE quando si tratta di facilità di progettazione web. Ciò che prima richiedeva una settimana richiede alcune ore e ora siamo tutti coinvolti con il nostro obiettivo personale di convertire tutti i siti Web dei nostri clienti in Divi". - Scott Lawrence
Divi è perfetto per liberi professionisti, agenzie e proprietari di siti Web che cercano un generatore di pagine visive potente, intuitivo e facile da usare. Che tu sappia programmare o meno, Divi è un incredibile strumento di creazione di siti Web.
Detto questo, cos'è SmartVideo?
Cos'è Swarmify SmartVideo?
Per i nuovi arrivati, Swarmify è un servizio di accelerazione video di prim'ordine che abbiamo lanciato nel 2013 dopo giorni di rigoroso sviluppo e test.
La nostra è una piattaforma di hosting video a servizio completo completa di set di strumenti di codifica, riproduzione, CDN video, consegna e distribuzione. Siamo orgogliosi di lavorare con un numero crescente di imprenditori di tutti i ceti sociali.
Siamo appassionati di ciò che facciamo e lavoriamo instancabilmente per offrirti video che si caricano istantaneamente senza buffering, come è normale con molti siti di hosting video come YouTube, Wistia e Vimeo.
Swarmify ti garantisce una riproduzione video 12 volte più veloce e un buffering 8 volte inferiore rispetto alla media dei lettori video sul mercato. Ci concentriamo solo sull'accelerazione dei video e siamo abbastanza bravi :)
Plug spudorato a parte, Swarmify è incredibilmente facile da integrare con diverse piattaforme di creazione di siti Web tra cui WordPress, Shopify e Squarespace, tra gli altri.
Mentre puoi incorporare manualmente il lettore video SmartVideo sul tuo sito WordPress, puoi risparmiare tempo utilizzando il nostro rivoluzionario plug-in SmartVideo WordPress.
Il plug-in è incredibilmente facile da installare e configurare sul tuo sito Web WordPress + Divi Builder. Offrirai ai tuoi visitatori esperienze video veloci e di alta qualità in meno di 10 minuti!
Con queste informazioni di base, ora siamo pronti per la parte divertente. Nella prossima sezione imparerai come usare Swarmify con Divi Builder. In altre parole, ti mostriamo come aggiungere un video a un tipico layout di Divi Builder.
Come utilizzare Swarmify SmartVideo con Divi Builder
Per la sezione seguente è necessario installare e attivare sia il plugin SmartVideo per WordPress che Divi. L'installazione e l'attivazione di SmartVideo o Divi è roba da bambini di quarta elementare, non ci aspettiamo che tu abbia problemi.
Se hai Divi e SmartVideo pronti, mettiamoci al lavoro. A scopo illustrativo, sto lavorando con il layout di Web Agency di Divi che assomiglia a questo:
Abbastanza pulito, vero? Quello che farò è aggiungere un video SmartVideo appena sotto il titolo principale, che dice " Full Service Web Design Agency ". Vedi immagine sopra.
Iniziamo!
Nella dashboard di amministrazione di WordPress, vai alla pagina che desideri modificare. Nel nostro caso, sto modificando la home page mostrata nello screengrab sopra.
Apri la pagina nell'editor come al solito. Per iniziare a modificare la pagina sopra in Divi Builder, fai semplicemente clic sul pulsante Modifica con The Divi Builder , come evidenziato di seguito.
In questo modo la tua pagina viene caricata nel front-end. Quindi, fai clic sul pulsante Abilita Visual Builder , come mostrato di seguito.
Quindi, scorri fino alla sezione che desideri modificare. Nel nostro caso, stiamo aggiungendo uno SmartVideo appena sotto il titolo principale nella parte superiore della pagina.
Quando passi il mouse sulla sezione, vengono visualizzate le opzioni di modifica. Basta fare clic sull'icona più (+) per aggiungere un nuovo modulo:
In questo modo si apre un popup che ti consente di aggiungere un nuovo modulo Divi:
Quindi, digita "SmartVideo" nella casella di ricerca e fai clic su SmartVideo , come mostrato di seguito.
Dopodiché, è il momento di configurare il tuo video utilizzando la scheda Impostazioni SmartVideo . Come puoi vedere nell'immagine qui sotto, ci sono molte opzioni a tua disposizione:
Nelle Impostazioni SmartVideo puoi:
- Scegli la fonte del video: può essere la libreria multimediale di WordPress, YouTube, Vimeo o qualsiasi altra fonte ( NB : se il tuo video di YouTube è impostato su privato , cambialo in non elencato)
- Modifica la larghezza e l'altezza del tuo video
- Imposta un poster personalizzato per il tuo video (per impostazione predefinita SmartVideo è il primo fotogramma del video se non scegli un'immagine poster personalizzata)
- Attiva/disattiva opzioni come Autoplay, Loop e Muto
- Attiva/disattiva opzioni come controlli video, design reattivo e riproduzione video in linea per il browser Safari iOS
- Controlla il design del tuo video utilizzando le opzioni Divi, che includono bordi, dimensioni, spaziatura, filtri, ombre dei riquadri, animazioni e molto altro :)
Una volta che hai finito, fai semplicemente clic sul pulsante Salva , come dettagliamo di seguito:
Non dimenticare di salvare le modifiche in Divi Visual Builder in seguito:
Ora, se visualizziamo il nostro sito di esempio sul front-end, vediamo il nuovo lettore video SmartVideo pronto per scatenare la festa:
Per aggiungere uno SmartVideo in qualsiasi sezione, ripeti semplicemente il processo. Avvia la pagina che desideri modificare in Divi Visual Builder, fai clic sull'icona più (+) per aggiungere un nuovo modulo, scegli il modulo SmartVideo, aggiungi le tue opzioni e salva le modifiche.
Semplice come A, B, C!
Aggiungere video SmartVideo al tuo sito web Divi non è mai stato così facile. Puoi dimenticare tutto sul branding di YouTube, sui video consigliati e sui link che rubano il tuo traffico.
Inoltre, puoi personalizzare completamente il lettore video SmartVideo per adattarlo allo stile del tuo sito web.
Cosa c'è di più?
Se hai già dei video sul tuo sito web Divi, SmartVideo li converte automaticamente non appena configuri il nostro plugin.
Assicurati di attivare Ottimizza sfondo e video esistenti nelle impostazioni di SmartVideo.
Come?
Nella dashboard di amministrazione di WordPress, vai su SmartVideo > Impostazioni . Quindi, attiva Ottimizza sfondo e video esistenti :
Successivamente, fai clic sul pulsante Salva impostazioni in fondo alla pagina:
E il gioco è fatto: SmartVideo convertirà automaticamente tutti i tuoi video esistenti.
Giusto; non devi fare altro :)
Come personalizzare il lettore video SmartVideo
Prima di arrivare alla fine, esaminiamo alcune opzioni per personalizzare il lettore video SmartVideo.
Modifica della forma e del colore del lettore video
Per impostazione predefinita, il lettore video SmartVideo utilizza un pulsante di riproduzione esagonale giallo. Tuttavia, puoi modificare la forma e il colore per adattarli al tuo sito web. Ecco come.
Nella dashboard di amministrazione di WordPress, fai clic su SmartVideo:
Una volta che sei nella dashboard di SmartVideo, fai clic sulla scheda Impostazioni , come mostrato di seguito.
Nella schermata Impostazioni , scorri verso il basso e troverai le sezioni che consentono di modificare la forma e il colore del pulsante di riproduzione:
Ecco altre note sullo screengrab sopra.
- Per modificare la forma del pulsante del lettore, scegli Predefinito , Rettangolo o Cerchio dal menu a discesa.
- Scegli un colore personalizzato per il tuo pulsante giocatore.
- Fare clic sul pulsante Salva impostazioni per salvare le modifiche.
Ora puoi goderti il tuo pulsante giocatore appena personalizzato :)
Opzioni più avanzate
SmartVideo include più opzioni per aggiungere sottotitoli da fonti YouTube, attivare/disattivare l'accelerazione del caricamento, passare a layout alternativi, aggiungere una filigrana personalizzata e monitorare i tuoi video con annunci.
Ecco come trovare le opzioni di cui sopra nella pagina Impostazioni SmartVideo. Per aggiungere sottotitoli da fonti YouTube, seleziona la casella mostrata di seguito e ricorda di salvare le impostazioni:
Per avviare più opzioni, scorri verso il basso e fai clic su Opzioni avanzate , come evidenziato di seguito.
Nella sezione Opzioni avanzate , hai le seguenti opzioni:
- Attiva o disattiva il metodo di layout alternativo , il che aiuta se si verificano problemi di dimensioni video dispari o schermo intero.
- Attiva o disattiva l'accelerazione del caricamento in caso di problemi con i caricamenti.
- Imposta una filigrana/logo personalizzato sul tuo lettore video.
- Aggiungi URL annuncio VAST , in modo da poter vendere annunci da Adsense, Spotx, DFP e così via.
Suggerimento per professionisti: ricordati sempre di fare clic sul pulsante Salva impostazioni in basso per salvare le modifiche.
Parole finali
Divi è un meraviglioso tema WordPress e un generatore di pagine visive. Ti aiuta a creare bellissimi siti web prima che il prossimo ragazzo finisca un panino. Il processo è semplice come importare un layout e personalizzarlo fino allo sfinimento.
La funzionalità di trascinamento della selezione rende la personalizzazione di qualsiasi layout facile come una torta. Non hai bisogno di alcuna abilità di programmazione, inoltre modifichi il tuo sito Web nel front-end, vedendo le tue modifiche avere effetto in tempo reale.
Se utilizzi video sul tuo sito Web, SmartVideo ti aiuta a offrire esperienze video veloci, prive di buffer e professionali sul tuo sito. Anche se ospiti i tuoi video su YouTube o altrove, il nostro lettore video privo di ingombri elimina il marchio e i collegamenti di terze parti.
Divi + SmartVideo è una combinazione vincente. Nelle tue mani, ora hai la combinazione perfetta per creare rapidamente siti Web e offrire esperienze video senza precedenti ai visitatori del tuo sito Web o ai clienti di web design.
Inoltre, non abbiamo limiti di larghezza di banda o spazio di archiviazione come altri servizi, il che significa che puoi ospitare video illimitati a prezzi convenienti :) Prova Divi + SmartVideo oggi e goditi video veloci e di alta qualità senza sudare.
Fateci sapere come va. Buona costruzione!