Kompletny przewodnik Beaver Builder + Swarmify dotyczący hostingu wideo

Czy korzystasz z Beaver Buildera? Jeśli tak, Swarmify pomaga dostarczać szybkie, wolne od buforów i profesjonalne wrażenia wideo na Twojej stronie internetowej bez rozbijania banku.

Obsługujący ponad milion stron internetowych Beaver Builder jest popularnym narzędziem do tworzenia stron typu „przeciągnij i upuść” wśród użytkowników WordPress.

Kreator stron jest niezwykle łatwy w użyciu, ale zawiera unikalny zestaw funkcji, które przyciągnęły go zarówno początkujący, jak i eksperci.

Na przykład, w mniej niż pięć minut pojawiła się następująca strona:

To w zasadzie gotowy szablon, który możesz zaimportować w ciągu kilku sekund. Następnie zastąp obrazy i tekst swoją zawartością i gotowe.

Jeśli nie lubisz szablonów Beaver Builder, możesz zacząć od pustej strony. Następnie przeciągnij i upuść bloki treści na miejsce i wizualnie utwórz resztę strony bez pisania HTML lub zmagania się ze skrótami.

W przeszłości omawialiśmy inne kreatory stron, takie jak Divi, Elementor, Brizy i Webflow. Sprawdź przewodniki, kiedy tylko możesz :)

Dzisiaj pokażemy Ci dokładnie, jak korzystać z Beaver Builder i Swarmify, aby zapewnić szybkie, bezproblemowe i profesjonalne wrażenia wideo na Twojej stronie internetowej.

Bez zbędnych ceregieli zacznijmy, bo trzeba się wiele nauczyć.

Co to jest Beaver Builder?

Przede wszystkim dowiedzmy się więcej o Beaver Builder ze względu na pierwszy zegar wśród nas.

Beaver Builder to wysokiej jakości narzędzie do tworzenia stron WordPress. Narzędzie pomaga wizualnie tworzyć responsywne strony WordPress.

Oznacza to, że tworzysz strony, przeciągając i upuszczając bloki treści. Nie potrzebujesz wcześniejszego doświadczenia w kodowaniu, aby korzystać z kreatora stron Beaver Builder.

To świetna wiadomość dla początkujących i profesjonalistów, ponieważ możesz usprawnić przepływ pracy i zaoszczędzić dużo czasu podczas tworzenia stron internetowych.

Największe nazwiska w WordPressie kochają i ufają Beaver Builder:

Najlepsze w Beaver Builder jest to, że jest tak niezwykle łatwy w użyciu, że będziesz budować witryny WordPress w ciągu kilku godzin, a nie dni.

A łatwość w użyciu nie oznacza, że ​​Beaver Builder nie jest tak potężny, jak inne narzędzia do tworzenia stron. Jest to solidny program do tworzenia stron dzięki obszernej liście fajnych funkcji.

Funkcje, mówisz?

Tak, Beaver Builder może pochwalić się następującymi funkcjami:

• W 100% responsywny projekt, co oznacza, że ​​Twoje strony będą wyglądać świetnie na wielu urządzeniach
• Beaver Builder Theme Framework dla wszystkich Twoich projektów WordPress
• Dziesiątki gotowych szablonów do tworzenia stron docelowych, stron głównych, stron treści itp.
• Beaver Builder Przeciągnij i upuść kreator stron
• Mnóstwo bloków treści do dodawania tekstu, obrazów, przycisków, nagłówków, filmów itp.
• Mnóstwo widżetów WordPress, w tym widżet SmartVideo
• Ustawienia ogólne
• W razie potrzeby niestandardowy kod HTML, CSS i JavaScript
• Skróty klawiszowe
• Beaver Themer Add-on, aby dostosować każdą część witryny, w tym nagłówki i stopki
• Pełna kontrola nad projektem Twojej strony internetowej
• Kompatybilny z szeroką gamą motywów WordPress
• Darmowa wersja dostępna jako wtyczka na WordPress.org
• Wsparcie na światowym poziomie
• Obsługa wielu witryn
• Białe oznakowanie
• I tak dalej

Beaver Builder to potężny kreator stron, który sprawia, że ​​tworzenie pięknych i responsywnych witryn WordPress jest dziecinnie proste. Jeśli to Twój pierwszy raz, możesz wypróbować bezpłatną wersję i przejść później na plan Pro.

Oferują trzy pakiety cenowe idealne dla początkujących właścicieli witryn, profesjonalnych freelancerów i agencji kreatywnych. Wszystkie pakiety umożliwiają korzystanie z Beaver Builder na nieograniczonej liczbie stron internetowych.

Teraz, gdy wszyscy jesteśmy na tej samej stronie, przejdźmy do SmartVideo firmy Swarmify.

Co to jest Swarmify SmartVideo?

Swarmify to firma zajmująca się akceleracją wideo, która koncentruje się na zapewnieniu wszystkim strumieniowania w jakości Netflix w prostym pakiecie. Nasza platforma SmartVideo upraszcza wszystkie złożone i drogie ruchome części, które otaczają wdrożenie wideo.

SmartVideo automatycznie obsługuje przesyłanie, kodowanie, hosting i dostarcza Twoje filmy bez względu na to, gdzie je przechowujesz, czy to YouTube, Dropbox, Amazon S3, Google Cloud i tak dalej.

Po co swarmizować SmartVideo?

Platforma Swarmify SmartVideo pomaga firmom rozwiązywać niektóre z najtrudniejszych problemów w przesyłaniu strumieniowym wideo: buforowanie i jakość przesyłania strumieniowego. SmartVideo powstrzymuje również polubienia YouTube przed wyprowadzaniem ruchu za pomocą odtwarzaczy wideo obciążonych linkami.

Dzięki naszemu rozwiązaniu dostarczania możesz dostarczać filmy, które są 12 razy szybsze niż przeciętni gracze w branży . Ta sama platforma dostarczania pomaga również 8x zmniejszyć liczbę przestojów .

„Swarmify SmartVideo uruchomiono w maju 2017 r. Każdego miesiąca obserwujemy ogromny wzrost. Coraz więcej firm zdaje sobie sprawę z rzeczywistych kosztów korzystania z YouTube. Przed SmartVideo nasze rozwiązanie było dostępne tylko dla dużych przedsiębiorstw. W sumie niedawno świętowaliśmy, że oddaliśmy ponad pięćset milionów filmów – mówi Nathan Barnett, dyrektor generalny Swarmify. „Jeśli Twoja witryna ładuje się szybko, ale wideo ładuje się wolno, nadal tracisz tego klienta”. Źródło: TwojaStory.com

SmartVideo pomaga dostarczać szybkie, wolne od buforowania i wysokiej jakości filmy na Twojej stronie internetowej Beaver Builder. Oferujemy pozbawiony bałaganu odtwarzacz wideo, który nie zawiera żadnych linków ani znaków firmowych, dzięki czemu możesz dostarczać profesjonalne wrażenia wideo odwiedzającym Twoją witrynę.

Oto niektóre z funkcji, które sprawiają, że SmartVideo jest najlepszą platformą do akceleracji wideo.

• Czysty odtwarzacz wideo bez rozpraszania uwagi — YouTube i inne platformy zaśmiecają swój odtwarzacz linkami, aby odprowadzić ruch. Odtwarzacz SmartVideo jest czysty, konfigurowalny i szczelny.
• Automatyczne konwersje YouTube i Vimeo - Jeśli korzystasz już z filmów YouTube lub Vimeo w swojej witrynie Beaver Builder, SmartVideo automatycznie skonwertuje wszystkie filmy, gdy tylko zainstalujesz naszą wtyczkę WordPress.
• Zoptymalizowany na każdym urządzeniu, co oznacza, że ​​Twoje filmy można oglądać na dowolnym urządzeniu i przeglądarce.
• Nieograniczona przepustowość i pamięć masowa
• Szybkie, bezbuforowe i odporne na utknięcia odtwarzanie
• Stałe wsparcie udzielane przez super utalentowanych i przyjaznych programistów
• Prosta struktura cenowa bez podejrzanych kontraktów
• Analiza zaangażowania wideo
• Globalna sieć wideo CDN zapewniająca błyskawiczne przesyłanie wideo użytkownikom bez względu na to, gdzie się znajdują
• Itp.

Swarmify SmartVideo to przełom w dziedzinie akceleracji wideo. Wnosimy do stołu duże doświadczenie zawodowe i wiedzę.

Poza tym instalacja SmartVideo na Twojej witrynie Beaver Builder jest niezwykle łatwa, o czym dowiesz się w następnej sekcji. Ale jeśli kiedykolwiek utkniesz, zawsze możesz się z nami skontaktować :) Zawsze chętnie pomożemy.

Szybko, pozwól nam zainstalować SmartVideo na Twojej stronie Beaver Builder.

Uwaga: W następnej sekcji będziesz potrzebować aktywnego konta Swarmify. Nie masz jeszcze konta? Utwórz go już dziś i skorzystaj z ekskluzywnej 50% zniżki.

Jak zintegrować Swarmify SmartVideo z witryną Beaver Builder?

Ponieważ Beaver Builder współpracuje z WordPress, będziemy korzystać z darmowej wtyczki SmartVideo. Po utworzeniu konta Swarmify pobierz wtyczkę SmartVideo WordPress na swój komputer.

Następnie zaloguj się do pulpitu administracyjnego WordPress i przejdź do Wtyczki > Dodaj nowy , jak pokazano poniżej.

Następnie kliknij przycisk Prześlij wtyczkę , wybierz wtyczkę SmartVideo z komputera i naciśnij Zainstaluj teraz :

Następnie aktywuj wtyczkę:

Jeszcze nas tam nie ma - czas połączyć twoją stronę z kontem Swarmify.

Jak?

Kliknij SmartVideo w menu administratora WordPress, jak podkreśliliśmy poniżej.

Na pulpicie SmartVideo kliknij przycisk Konfiguruj :

Spowoduje to przejście do następującej strony konfiguracji, która zawiera instrukcje i interaktywny GIF pokazujący dokładnie, co musisz zrobić.

Ale aby zaoszczędzić ci kłopotów, szybko zaloguj się na swoje konto Swarmify i skopiuj klucz Swarm CDN na górze:

Wróć do strony konfiguracji SmartVideo w WordPress, przewiń w dół, wklej klucz Swarm CDN i kliknij Włącz SmartVideo , jak pokazano poniżej.

To całkiem proste; Nie oczekuję, że napotkasz trudności. Po zakończeniu powinieneś zobaczyć zieloną etykietę Włączone u góry:

Zanim dowiemy się, jak dodać wideo SmartVideo do witryny Beaver Builder, omówimy niektóre ustawienia SmartVideo dostępne na powyższej stronie.

Kliknij kartę Ustawienia , jak podkreśliliśmy na poniższym zrzucie ekranu.

Spowoduje to przejście do następującej strony ustawień.

Omówmy pokrótce każdą sekcję. Dla Państwa przyjemności odpowiednio ponumerowałem sekcje.

(1) Na samej górze masz możliwość włączenia lub wyłączenia SmartVideo. Oczywiście chcesz, aby funkcja SmartVideo była zawsze włączona, aby zagwarantować najlepszą wydajność.

(2) Opcje podstawowe

Masz drugą sekcję z kilkoma podstawowymi opcjami, aby dostosować odtwarzacz SmartVideo i wrażenia. Dostępne opcje obejmują:

• Włącz lub wyłącz automatyczne konwersje YouTube i Vimeo — zaznacz pole wyboru, aby automatycznie konwertować filmy z YouTube i Vimeo znajdujące się już w Twojej witrynie. Włącz i zostaw tak.
• Wyświetlaj napisy, gdy są dostępne ze źródeł YouTube – pozostaw to pole niezaznaczone, o ile nie jest to konieczne.
• Optymalizuj filmy w tle i istniejące filmy — włącz tę opcję, a SmartVideo zoptymalizuje istniejące filmy i filmy w tle. Włącz i zostaw tak.
• Zmień kształt przycisku odtwarzania — nie wymaga wyjaśnień. Masz do wyboru trzy kształty: Domyślny (lub Sześciokąt ), Prostokąt i Okrąg . Wybierz, co chcesz. Domyślny kształt działa dla mnie :)
• Wybierz kolor, aby dopasować elementy odtwarzacza wideo do kolorów witryny — ponownie masz możliwość dostosowania wyglądu odtwarzacza wideo w witrynie. Wybierz swój niestandardowy kolor tutaj :)

Poniżej mamy...

(3) Opcje zaawansowane

Po załadowaniu strony ustawień sekcja Opcje zaawansowane jest zwinięta. Kliknij tytuł, aby załadować sekcję, która oferuje następujące opcje.

• Włącz lub wyłącz alternatywną metodę układu — ta opcja jest przydatna, jeśli wystąpią problemy z nietypowym rozmiarem wideo lub pełnym ekranem. Zaznacz pole wyboru.
• Włącz lub wyłącz przyspieszenie przesyłania — jeśli masz problemy z przesyłaniem filmów, włącz tę opcję .
• (Tylko plan Pro) Ustaw znak wodny — tutaj możesz ustawić obraz lub logo jako znak wodny dla odtwarzacza wideo. To świetnie nadaje się do celów brandingowych, więc użyj swojego najlepszego obrazu/logo.
• (Tylko plan Pro) Dodaj adres URL reklamy VAST – tutaj wpisujesz adres URL reklamy, jeśli chcesz zarabiać na swoich filmach za pomocą reklam AdSense, DFP, SpotX itd.

Gdy masz już odpowiednie ustawienia, nie zapomnij kliknąć Zapisz ustawienia na dole strony.

Pomijając to, dodajmy inteligentne wideo do Twojej strony Beaver Builder.

Jak dodać SmartVideo do strony Beaver Builder?

Do celów ilustracyjnych używam tej samej strony, którą pokazałeś wcześniej. Zamienię zaznaczony obraz na górze na SmartVideo:

Pożyczyłem wideo SpaceX Launches z kanału SpaceX na YouTube. To ten sam film w naszym demo (Proszę sprawdź to).

Uwaga: jeśli Twoim źródłem jest YouTube, upewnij się, że używasz linku do umieszczenia na stronie (tj. https://www.youtube.com/embed/gmJgW-yMAIg ) zamiast bezpośredniego linku do oglądania (tj. https://www. youtube.com/watch?v=gmJgW-yMAIg ).

Aby znaleźć link do umieszczenia na stronie, przejdź pod film i kliknij przycisk Udostępnij :

Następnie kliknij przycisk Osadź , jak pokazano poniżej.

Następnie wejdź do wyskakującego okienka i skopiuj link do osadzania, jak podkreśliliśmy poniżej.

Widzieć? To nie było takie trudne.

NB: Inna sprawa, jeśli pozyskujesz filmy ze swojego kanału YouTube, a Twoje filmy są ustawione jako „ prywatne ”, zmień je na „ niepubliczne ”.

Z tą preambułą idźmy dalej.

Otwórz swoją stronę w Beaver Builder:

Ponieważ zastępuję obraz, muszę go najpierw usunąć, klikając ikonę Usuń w następujący sposób:

Co zostawia mnie z pustą kolumną:

Porada dla profesjonalistów: Możesz pominąć powyższy krok, jeśli nie zastępujesz obrazu, jak w moim przypadku. Po prostu upewnij się, że masz pustą kolumnę lub wiersz, w którym dodajesz film. Jeśli wcześniej korzystałeś z Beaver Buildera, nie powinno to stanowić problemu.

Następnie kliknij ikonę modułu dodawania treści ( + ) plus u góry:

Następnie przeciągnij i upuść blok zawartości SmartVideo w miejscu, w którym chcesz umieścić wideo:

Przeciągnięcie i upuszczenie modułu SmartVideo powoduje wyświetlenie ładnego małego pudełka pokazanego poniżej.

To pudełko pozwala na wiele rzeczy. Na przykład pozwala wybrać źródło wideo i kontrolować kilka podstawowych i zaawansowanych opcji - więcej o tym za minutę.

Następnie kliknij Źródło wideo , wybierz YouTube , wklej kod do umieszczenia na stronie i kliknij Zapisz , w tej kolejności:

Miły. Możesz już zobaczyć żółty sześciokątny przycisk odtwarzania i odtwarzacz wideo jeszcze przed kliknięciem Zapisz.

Kliknij Gotowe u góry, a następnie Opublikuj :

Wskazówka dla profesjonalistów: możesz zapisać wersję roboczą , jeśli nadal pracujesz na stronie.

Jeśli sprawdzę mój inteligentny film na interfejsie, zobaczę wideo w odtwarzaczu wideo bez bałaganu. Wideo jest już zoptymalizowane i przyspieszone przez Swarmify, jak widać poniżej.

Bez brandingu YouTube, bez buforowania i bez linków, które wysysają ruch. O tak, nie ma też „Polecanych filmów”, gdy wstrzymam film. Poza tym ładuje się dość szybko :)

Ale wygląda dziwnie mały, ale to dlatego, że nie zmieniłem szerokości mojej kolumny w Beaver Builder. Możesz zmieniać szerokość kolumn i przesuwać elementy, aż uzyskasz odpowiedni rozmiar.

Bawiłem się szerokością mojej kolumny i edytowałem trochę treści i oto, co mam"

Nie jest zły. W końcu większe jest lepsze :)

Porozmawiajmy teraz o podstawowych i zaawansowanych opcjach, o których wspomnieliśmy przed chwilą. Wiesz, że? Kiedy dodaliśmy wideo i wyskoczyło to ładne małe pudełko?

Kliknij wewnątrz modułu treści SmartVideo w Beaver Builder:

Spowoduje to przejście do następujących opcji, w których możesz zobaczyć opcje podstawowe i zaawansowane:

W przeciwieństwie do podstawowych i zaawansowanych opcji, które omówiliśmy, gdy połączyliśmy Twoją witrynę z kontem Swarmify, powyższe opcje pozwalają dostosować zachowanie gracza, z braku lepszego słowa.

To jest to co mam na mysli. Śmiało i kliknij Opcje podstawowe , które prowadzą do tego miejsca:

Tylko spójrz na to! Wiele opcji kontrolowania takich rzeczy, jak szerokość, wysokość odtwarzacza wideo, odtwarzanie wideo w linii (idealne dla przeglądarki Safari OS) i responsywny projekt.

Masz też opcje takie jak Autoodtwarzanie (jeśli to włączysz, upewnij się, że Twój film jest wyciszony) , Wyciszony (film zaczyna być wyciszony) , Pętla (wideo odtwarza się ponownie), a nawet jedna, aby wyłączyć elementy sterujące (ale nie rób tego, ponieważ użytkownicy nie będą mogli odtwarzać, wstrzymywać ani zmniejszać głośności, co jest denerwujące).

Następnie masz zakładkę Zaawansowane , która wygląda tak:

Ponownie, mnóstwo opcji, aby jeszcze bardziej dostosować odtwarzacz wideo. Dodajesz animacje (sprawiasz, że film odbija się podczas wczytywania strony), ustawiasz odstępy wokół odtwarzacza wideo i wiele więcej.

Ponownie, jak zawsze, nie zapomnij zapisać zmian, gdy skończysz.

Końcowe przemyślenia

Beaver Builder to całkiem elegancki program do tworzenia stron. Jest potężna, wykraczająca poza to, co początkowo wyobrażałeś sobie, ale kiedy już tam dotrzesz i zaczniesz majstrować, szybko zdasz sobie sprawę, że masz potężne narzędzie do zbudowania dowolnej nowoczesnej strony internetowej.

Ale nie jest przeznaczony do optymalizacji wideo ani nawet do przyspieszania; to tylko kreator stron. W tym miejscu pojawia się rozwiązanie Swarmify SmartVideo. Pomożemy Ci dostarczać szybkie i profesjonalne wrażenia wideo na stronach internetowych Beaver Builder.

Wszystko to bez wysokich kosztów, ograniczeń i wyzwań technicznych, które towarzyszą większości hostów wideo.

Czy coś pominęliśmy? Skontaktuj się z nami w każdej chwili, a chętnie porozmawiamy.