La guida completa di Beaver Builder + Swarmify per l'hosting video

Pubblicato: 2020-11-25

Usi Beaver Builder? In tal caso, Swarmify ti aiuta a offrire esperienze video veloci, prive di buffer e professionali sul tuo sito Web senza spendere troppo.

Alimentando oltre un milione di siti Web, Beaver Builder è un popolare generatore di pagine drag and drop tra gli utenti di WordPress.

Il generatore di pagine è incredibilmente facile da usare ma viene fornito con un set unico di funzionalità che lo hanno reso caro sia ai principianti che agli esperti.

Ad esempio, ho ottenuto la seguente pagina in meno di cinque minuti:

Pagina WordPress di Beaver Builder

È fondamentalmente un modello già pronto che puoi importare in pochi secondi. Quindi, sostituisci le immagini e il testo con i tuoi contenuti e sei pronto e funzionante.

Se non ti piacciono i modelli di Beaver Builder, sei libero di iniziare con una pagina vuota. Quindi trascina e rilascia i blocchi di contenuto in posizione e forgia visivamente il resto della tua pagina senza scrivere HTML o lottare con gli shortcode.

In passato, abbiamo trattato altri page builder come Divi, Elementor, Brizy e Webflow. Si prega di controllare le guide ogni volta che puoi :)

Oggi ti mostriamo esattamente come utilizzare Beaver Builder e Swarmify per offrire esperienze video veloci, senza stallo e professionali sul tuo sito web.

Senza ulteriori indugi, iniziamo poiché c'è molto da imparare.

Cos'è Beaver Builder?

Sito web di Beaver Builder

Prima di tutto, impariamo di più su Beaver Builder per il bene del primo timer tra noi.

Beaver Builder è un generatore di pagine WordPress premium. Lo strumento ti aiuta a creare visivamente pagine WordPress reattive.

Ciò significa che crei pagine trascinando e rilasciando blocchi di contenuto. Non è necessaria una precedente esperienza di codifica per utilizzare il generatore di pagine Beaver Builder.

Questa è un'ottima notizia per principianti e professionisti poiché puoi semplificare il flusso di lavoro e risparmiare molto tempo durante la creazione di siti Web.

I più grandi nomi di WordPress amano e si fidano di Beaver Builder:

Testimonianze di Beaver Builder

La parte migliore di Beaver Builder è il fatto che è così straordinariamente facile da usare che creerai siti Web WordPress nel giro di poche ore e non di giorni.

Ed essere facile da usare non significa che Beaver Builder non sia potente come altri page builder. È un robusto generatore di pagine grazie a un ampio elenco di funzioni eleganti.

Caratteristiche, dici?

Sì, Beaver Builder vanta le seguenti funzionalità:

  • Design reattivo al 100%, il che significa che le tue pagine avranno un bell'aspetto su più dispositivi
  • Beaver Builder Theme Framework per tutti i tuoi progetti WordPress
  • Decine di modelli predefiniti per creare landing page, home page, pagine di contenuto, ecc.
  • Beaver Builder Drag and Drop page builder
  • Una gran quantità di blocchi di contenuto per aggiungere testo, immagini, pulsanti, intestazioni, video, ecc.
  • Un sacco di widget WordPress, incluso il widget SmartVideo
  • Impostazioni globali
  • HTML, CSS e JavaScript personalizzati, se necessario
  • Tasti rapidi
  • Componente aggiuntivo Beaver Themer per personalizzare ogni parte del tuo sito Web, comprese intestazioni e piè di pagina
  • Controllo totale sul design del tuo sito web
  • Compatibile con un'ampia gamma di temi WordPress
  • Una versione gratuita disponibile come plugin su WordPress.org
  • Supporto di livello mondiale
  • Capacità multisito
  • Etichettatura bianca
  • eccetera

Beaver Builder è un potente generatore di pagine che rende la creazione di siti Web WordPress belli e reattivi un gioco da ragazzi. Se è la prima volta, puoi provare la versione gratuita e passare a un piano pro in un secondo momento.

Caratteristiche di Beaver Builder

Offrono tre pacchetti di prezzi perfetti per i proprietari di siti per principianti, i liberi professionisti e le agenzie creative. Tutti i pacchetti ti consentono di utilizzare Beaver Builder su un numero illimitato di siti Web.

Ora che siamo tutti sulla stessa pagina, passiamo allo SmartVideo di Swarmify.

Cos'è Swarmify SmartVideo?

Sito web Swarmify

Swarmify è una società di accelerazione video focalizzata sul portare lo streaming di qualità Netflix a tutti in un semplice pacchetto. La nostra piattaforma SmartVideo semplifica tutte le parti mobili complesse e costose che circondano la distribuzione video.

SmartVideo gestisce automaticamente il caricamento, la codifica, l'hosting e distribuisce i tuoi video indipendentemente da dove li memorizzi, che si tratti di YouTube, Dropbox, Amazon S3, Google Cloud e così via.

Perché Swarmify SmartVideo?

La piattaforma Swarmify SmartVideo aiuta le aziende a risolvere alcuni dei problemi più difficili nello streaming video: buffering e qualità dello streaming. SmartVideo impedisce anche ai Mi piace di YouTube di sottrarre il tuo traffico utilizzando lettori video carichi di link.

Grazie alla nostra soluzione di consegna, puoi fornire video 12 volte più veloci della media dei giocatori del settore . La stessa piattaforma di consegna ti aiuta anche a ridurre gli stalli di 8 volte .

“Swarmify SmartVideo è stato lanciato a maggio 2017. Abbiamo assistito a una crescita enorme ogni mese. Sempre più aziende stanno riconoscendo il costo effettivo dell'utilizzo di YouTube. Prima di SmartVideo, la nostra soluzione era disponibile solo per le grandi aziende. In totale, abbiamo recentemente celebrato lo streaming di oltre cinquecento milioni di video", afferma Nathan Barnett, CEO di Swarmify. "Se il tuo sito web si carica velocemente, ma il tuo video si carica lentamente, perderai comunque quel cliente". Fonte: YourStory.com

SmartVideo ti aiuta a fornire video veloci, senza buffer e di alta qualità sul tuo sito Web Beaver Builder. Ti offriamo un lettore video privo di ingombri che non contiene collegamenti e marchi di terze parti, consentendoti di offrire esperienze video professionali ai visitatori del tuo sito web.

Ecco alcune delle caratteristiche che rendono SmartVideo la migliore piattaforma di accelerazione video in circolazione.

  • Lettore video pulito e privo di distrazioni: YouTube e altre piattaforme ingombrano il loro lettore di link per sottrarre il tuo traffico. Il lettore SmartVideo è pulito, personalizzabile e privo di perdite.
  • Conversioni automatiche di YouTube e Vimeo - Se utilizzi già video YouTube o Vimeo sul tuo sito Beaver Builder, SmartVideo converte automaticamente tutti i video non appena installi il nostro plugin WordPress.
  • Ottimizzato su ogni dispositivo, il che significa che i tuoi video possono essere visualizzati su qualsiasi dispositivo e browser.
  • Larghezza di banda e spazio di archiviazione illimitati
  • Riproduzione veloce, senza buffer e a prova di stallo
  • Supporto continuo fornito da sviluppatori super talentuosi e amichevoli
  • Struttura dei prezzi semplice senza contratti loschi
  • Analisi del coinvolgimento video
  • CDN video globale per fornire video incredibilmente veloci agli utenti, indipendentemente da dove si trovino nel mondo
  • Eccetera.

Swarmify SmartVideo è un punto di svolta nel campo dell'accelerazione video. Mettiamo in tavola molta esperienza lavorativa e competenza.

Inoltre, l'installazione di SmartVideo sul tuo sito Web Beaver Builder è incredibilmente semplice, come imparerai nella prossima sezione. Ma se sei bloccato, puoi sempre contattarci :) Siamo sempre felici di aiutarti.

Muovendosi rapidamente, installiamo SmartVideo sul tuo sito Web Beaver Builder.

NB: per la prossima sezione, avrai bisogno di un account Swarmify attivo. Non hai ancora un conto? Creane uno oggi e approfitta del tuo esclusivo sconto del 50%.

In Swarmify, la nostra missione è portare un'esperienza video accelerata e senza distrazioni su siti Web di tutte le dimensioni. Che tu sia il proprietario di un sito web , un'agenzia o semplicemente desideri entrare nel nostro programma di affiliazione , abbiamo un piano per te!

Come integrare Swarmify SmartVideo con un sito Web di Beaver Builder

Poiché Beaver Builder funziona con WordPress, utilizzeremo il plug-in SmartVideo gratuito . Dopo aver creato il tuo account Swarmify, scarica il plugin SmartVideo WordPress sul tuo computer.

Quindi, accedi alla dashboard di amministrazione di WordPress e vai a Plugin > Aggiungi nuovo , come mostrato di seguito.

Dashboard di amministrazione di WordPress, aggiungi un nuovo plug-in

Quindi, fai clic sul pulsante Carica plug -in, seleziona il plug-in SmartVideo dal tuo computer e premi Installa ora :

Dashboard di amministrazione di WordPress, installa il plug-in

Successivamente, attiva il plug-in:

Dashboard di amministrazione di WordPress, attiva il plugin

Non ci siamo ancora: è ora di collegare il tuo sito web al tuo account Swarmify.

Come?

Fai clic su SmartVideo nel menu di amministrazione di WordPress, come evidenziato di seguito.

Dashboard di amministrazione di WordPress, plug-in SmartVideo

Nella dashboard SmartVideo, fare clic sul pulsante Configura :

Plugin SmartVideo per WordPress

Ciò ti porta alla seguente pagina di configurazione, che contiene le istruzioni e una GIF interattiva che mostra esattamente cosa devi fare dopo.

Scheda Configurazione nel plug-in SmartVideo

Ma per risparmiarti la fatica, accedi rapidamente al tuo account Swarmify e copia la chiave CDN Swarm in alto:

Chiave CDN Swarm nel dashboard di Swarmify

Torna alla pagina di configurazione di SmartVideo in WordPress, scorri verso il basso, incolla la chiave Swarm CDN e fai clic su Abilita SmartVideo , come mostrato di seguito.

Aggiungi Swarm CDN Key al plug-in SmartVideo

È piuttosto semplice; Non mi aspetto che affronti difficoltà. Una volta terminato, dovresti vedere l'etichetta verde Abilitata in alto:

SmartVideo è abilitato

Prima di apprendere come aggiungere un video SmartVideo al tuo sito Web Beaver Builder, esaminiamo alcune delle impostazioni SmartVideo disponibili nella pagina precedente.

Fai clic sulla scheda Impostazioni , come evidenziato nella schermata qui sotto.

Fare clic sul menu delle impostazioni nel plug-in SmartVideo

In questo modo si accede alla seguente pagina delle impostazioni.

Salva le impostazioni nel plug-in SmartVideo

Esaminiamo brevemente ogni sezione. Ho numerato le sezioni in modo appropriato per il tuo piacere.

(1) In cima, hai la possibilità di attivare o disattivare SmartVideo. Ovviamente, vuoi mantenere SmartVideo sempre abilitato per garantire le migliori prestazioni.

(2) Opzioni di base

Hai la seconda sezione con un paio di opzioni di base per personalizzare il tuo lettore SmartVideo e l'esperienza. Le opzioni disponibili includono:

  • Attiva o disattiva le conversioni automatiche di YouTube e Vimeo : seleziona la casella di controllo per convertire automaticamente i video di YouTube e Vimeo già sul tuo sito. Attiva e lascia così.
  • Mostra sottotitoli quando disponibili da fonti YouTube - A meno che non sia essenziale, lascia deselezionata questa casella di controllo.
  • Ottimizza video di sfondo e video esistenti : attiva questa opzione e SmartVideo ottimizzerà i video esistenti e i video di sfondo. Attiva e lascia così.
  • Cambia la forma del pulsante di riproduzione - Autoesplicativo. Hai tre scelte di forma: Predefinito (o Esagono ), Rettangolo e Cerchio . Scegli quello che ti piace. La forma predefinita funziona per me :)
  • Scegli un colore che corrisponda ai componenti del video player con i colori del tuo sito web - Anche in questo caso, hai la possibilità di personalizzare l'aspetto del tuo video player sul tuo sito. Scegli il tuo colore personalizzato da qui :)

Di seguito abbiamo...

(3) Opzioni avanzate

Quando carichi la pagina delle impostazioni, la sezione Opzioni avanzate viene compressa. Clicca sul titolo per caricare la sezione, che ti offre le seguenti opzioni.

  • Attiva o disattiva il metodo di layout alternativo : questa opzione è utile se si verificano problemi di dimensioni video dispari o schermo intero. Spunta la casella di controllo.
  • Attiva o disattiva l'accelerazione del caricamento : in caso di problemi con il caricamento dei video, attiva questa opzione .
  • (Solo piano Pro) Imposta una filigrana : qui puoi impostare un'immagine o un logo come filigrana per il lettore video. Questo è ottimo per scopi di branding, quindi usa la tua immagine/logo migliore.
  • (Solo piano Pro) Aggiungi URL annuncio VAST - Qui è dove inserisci l'URL dell'annuncio se stai cercando di monetizzare i tuoi video con annunci pubblicitari di AdSense, DFP, SpotX e così via.

Una volta che hai le impostazioni corrette, non dimenticare di fare clic su Salva impostazioni nella parte inferiore della pagina.

Detto questo, aggiungiamo un video intelligente alla tua pagina di Beaver Builder.

Come aggiungere SmartVideo a una pagina Beaver Builder

Sto usando la stessa pagina che ti hai mostrato prima a scopo illustrativo. Sostituirò l'immagine contrassegnata in alto con uno SmartVideo:

Pagina di esempio di Beaver Builder

Ho preso in prestito il video SpaceX Launches dal canale YouTube di SpaceX. È lo stesso video nella nostra demo (per favore controlla).

NB: se YouTube è la tua fonte, assicurati di utilizzare il link di incorporamento (ad esempio, https://www.youtube.com/embed/gmJgW-yMAIg ) invece del link di visualizzazione diretta (ad esempio, https://www. youtube.com/watch?v=gmJgW-yMAIg ).

Per trovare il link di incorporamento, vai sotto il video e fai clic sul pulsante Condividi :

Fai clic su Condividi su YouTube

Successivamente, fai clic sul pulsante Incorpora , come mostrato di seguito.

Fai clic su Incorpora su YouTube

Quindi vai all'interno del popup che appare e copia il link di incorporamento, come evidenziato di seguito.

Copia l'URL di incorporamento

Vedere? Non è stato così difficile.

NB: Un'altra cosa, se stai acquistando video dal tuo canale YouTube e i tuoi video sono impostati su " privato ", cambialo in "non in elenco".

Con quel preambolo, andiamo avanti.

Apri la tua pagina in Beaver Builder:

Seleziona il modulo in Beaver Builder

Dato che sto sostituendo l'immagine, devo prima eliminarla facendo clic sull'icona Rimuovi in ​​questo modo:

Rimuovere il modulo Beaver Builder

Il che mi lascia con una colonna vuota:

Colonna vuota in Beaver Builder

Suggerimento professionale : puoi saltare il passaggio precedente se non stai sostituendo un'immagine come nel mio caso. Assicurati solo di avere una colonna o una riga vuota in cui stai aggiungendo il tuo video. Se hai già utilizzato Beaver Builder, non dovrebbe essere un problema.

Quindi, fai clic sull'icona Aggiungi contenuto modulo ( + ) più in alto:

Aggiungi il modulo di contenuto in Beaver Builder

Successivamente, trascina e rilascia il blocco di contenuti SmartVideo dove desideri posizionare il video:

Trascina il blocco SmartVideo sulla pagina

Trascinando e rilasciando il modulo SmartVideo viene visualizzata la simpatica scatoletta mostrata di seguito.

Seleziona video

Questa scatola ti permette di fare molte cose. Ad esempio, ti consente di scegliere la tua sorgente video e controllare un paio di opzioni di base e avanzate, ne parleremo tra un minuto.

Quindi, fai clic su Sorgente video , scegli YouTube , incolla il codice di incorporamento e premi Salva , in quest'ordine:

Aggiungi l'URL del video

Bello. Puoi già vedere il pulsante di riproduzione esagonale giallo e il video player anche prima di fare clic su Salva.

Fai clic su Fine in alto e poi su Pubblica :

Fare clic su Fine e pubblicare sulla pagina

Suggerimento professionale : puoi salvare la bozza se stai ancora lavorando sulla pagina.

Se controllo il mio video intelligente sul frontend, vedrò il video nel lettore video privo di ingombri. Il video è già ottimizzato e accelerato da Swarmify, come puoi vedere di seguito.

Nota che l'accelerazione video è "Attiva"

Nessun marchio YouTube, nessun buffering e nessun link che sottrae il tuo traffico. Oh sì, non ci sono nemmeno "Video consigliati" quando metto in pausa il video. Inoltre, si carica abbastanza velocemente :)

Ma sembra stranamente piccolo, ma è perché non ho cambiato la larghezza della mia colonna in Beaver Builder. Puoi modificare la larghezza delle colonne e spostare le cose finché non ottieni la giusta dimensione.

Ho giocato con la larghezza della mia colonna e modificato alcuni contenuti, e questo è quello che ho ottenuto"

Pagina dopo aver regolato la larghezza della colonna

Non male. Più grande è meglio dopotutto :)

Ora parliamo delle opzioni di base e avanzate di cui abbiamo parlato un secondo fa. Sai? Quando stavamo aggiungendo il video e quella simpatica scatoletta è spuntata fuori?

Fare clic all'interno del modulo di contenuto SmartVideo all'interno di Beaver Builder:

Fare clic all'interno del modulo SmartVideo

In questo modo si accede alle seguenti opzioni, dove è possibile visualizzare le opzioni Base e Avanzate:

Impostazioni del modulo SmartVideo

A differenza delle opzioni di base e avanzate che abbiamo trattato quando abbiamo collegato il tuo sito al tuo account Swarmify, le opzioni di cui sopra ti consentono di personalizzare il comportamento del giocatore, in mancanza di una parola migliore.

Questo è quello che voglio dire. Vai avanti e fai clic su Opzioni di base , che ti porta qui:

Opzioni di base nel modulo SmartVideo

Basta guardare quello! Molte opzioni per controllare cose come la larghezza, l'altezza del lettore video, la riproduzione di video in linea (ottimo per il browser del sistema operativo Safari) e il design reattivo.

Hai anche controlli come Autoplay (se lo attivi, assicurati che il tuo video venga riprodotto automaticamente) , Muto (il video inizia in modalità mute) , Loop (il video continua a essere riprodotto) e persino uno per disattivare i controlli (ma non farlo perché gli utenti non saranno in grado di riprodurre, mettere in pausa o abbassare il volume, il che è fastidioso).

Quindi hai la scheda Avanzate , che assomiglia a questa:

Opzioni avanzate nel modulo SmartVideo

Ancora una volta, una barca di opzioni per personalizzare ulteriormente il tuo lettore video. Aggiungi animazioni (fai rimbalzare il video quando la pagina viene caricata), imposti la spaziatura attorno al video player e molto altro ancora.

Ancora una volta, come sempre, non dimenticare di salvare le modifiche quando hai finito.

Pensieri finali

Beaver Builder è un generatore di pagine piuttosto elegante. È potente al di là di quello che immagineresti all'inizio, ma una volta che entri lì e inizi ad armeggiare, ti rendi subito conto di avere uno strumento formidabile per costruire qualsiasi sito Web moderno.

Ma non è progettato per l'ottimizzazione video o addirittura per l'accelerazione; è semplicemente un generatore di pagine. È qui che entra in gioco la soluzione Swarmify SmartVideo. Ti aiutiamo a fornire esperienze video rapide e professionali sui tuoi siti Web Beaver Builder.

Il tutto senza i pesanti costi, i limiti e le sfide tecniche che accompagnano la maggior parte degli host di video.

Abbiamo tralasciato qualcosa? Contattaci in qualsiasi momento e saremo felici di chattare.

Prova SmartVideo oggi!