Dodawanie efektów 3D do plików GIF i filmów HTML5 w celu wyświetlania unikalnych animacji produktów w Divi

Animowane pliki GIF i filmy HTML5 świetnie nadają się do animowania działania produktu w Twojej witrynie. Te krótkie animacje przekazują odwiedzającym cenne informacje w sposób, który jest łatwiej przyswajalny niż zwykły film. Dodanie tego typu plików GIF i filmów HTML5 można wykonać dość łatwo za pomocą Divi. A przy odrobinie kreatywności możesz dodać efekty 3D do unikalnych animacji produktów.

W tym samouczku pokażę, jak dodawać efekty 3D do filmów GIF i HTML5, aby wyświetlać unikalne animacje produktów w Divi. Ten projekt działa naprawdę dobrze dla tych, którzy szukają kreatywnego układu, aby zaprezentować polecany produkt lub usługę. Aby to zrobić, musimy najpierw zrozumieć, jak dodawać do swojej strony osadzone pliki GIF i wideo HTML5 za pomocą Divi. Następnie będziemy mogli użyć opcji transformacji Divi, aby ustawić i obrócić GIF (lub wideo) w przestrzeni 3D. Na koniec użyjemy kilku technik projektowania Divi, aby stworzyć piękny układ sekcji pasujący do tych trójwymiarowych GIF-ów i filmów.

Zacznijmy.

zapowiedź

Oto rzut oka na projekt, który zbudujemy w tym samouczku. Projekt wygląda podobnie przy użyciu GIF i wideo HTML5 do tworzenia animacji produktu.

Pobierz efekty 3D do wideo w formacie GIF i HTML5 Animacje produktów Divi Layout ZA DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Subskrybuj nasz kanał YouTube

Używanie GIF-ów do krótkich animacji produktów

GIF-y istnieją od dawna. Dzieje się tak prawdopodobnie dlatego, że GIF-y są łatwe do zrobienia i powszechnie obsługiwane w różnych przeglądarkach. I sprawdzają się przy naprawdę krótkich animacjach produktowych. Ponieważ GIF jest obrazem, możesz go używać w module Divi Image, tak jak każdego innego jpg lub png. Pozwala to stylizować GIF z pełną mocą wbudowanych ustawień Divi. Ale uważaj, GIF-y o dłuższym czasie trwania i wyższej liczbie klatek na sekundę mogą skutkować naprawdę dużymi rozmiarami plików. Najlepiej więc, aby Twoje GIF-y były krótkie i jak najmniejsze.

Używanie wideo HTML5 jako zamiennika GIF

Filmy HTML5 stają się popularnym zamiennikiem GIF-ów, zwłaszcza w przypadku dłuższych animacji produktów. Być może zauważyłeś, że są one używane w nowym projekcie strony internetowej Elegant Themes. Są one znacznie mniejsze w porównaniu do GIF-ów i dlatego ładowanie zajmują mniej czasu. A dodanie wideo HTML5 do witryny Divi jest proste. Wszystko, co musisz zrobić, to dodać element wideo HTML5, aby osadzić wideo na swojej stronie (podobnie jak w przypadku dodawania krótkiego kodu wideo w WordPress). Możesz także dostosować wideo za pomocą ukrytych elementów sterujących, zapętlania i autoodtwarzania, co daje w wyniku wysokiej jakości animację, która działa jak GIF. Dodatkowo, dodając osadzanie do modułu Divi, możesz również użyć kreatora Divi, aby stylizować wideo w kreatywny sposób.

Sprawdź ten post, aby uzyskać więcej informacji o tym, dlaczego warto rozważyć użycie HTML5 Video zamiast zwykłych GIF-ów.

Teraz, gdy rozumiemy nieco więcej na temat używania plików GIF i filmów HTML5, jesteśmy gotowi, aby zacząć używać ich w Divi.

Czego potrzebujesz do tego samouczka

Aby rozpocząć, będziesz potrzebować:

1. Obraz GIF
2. Plik wideo MP4 (i adres URL do tego pliku wideo), który ma zostać użyty we osadzeniu elementu wideo HTML5. Aby uzyskać maksymalną obsługę przeglądarki, możesz również dołączyć ten sam plik wideo w formacie webm (więcej na ten temat później).
3. Zainstalowany i aktywny motyw Divi
4. Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Dodawanie efektu 3D do animowanego wideo GIF lub HTML5

Zanim przejdziemy zbyt daleko do projektowania pełnego układu sekcji dla tego samouczka, pomyślałem, że najlepiej będzie pokazać, jak dodać efekt 3D zarówno do GIF, jak i do wideo HTML5. Gdy skończymy, dopracujemy resztę układu sekcji z ładnym, nowoczesnym designem.

Na razie zacznijmy od dodania efektu 3D do GIF-a w Divi.

Tworzenie GIF-a

Istnieje wiele sposobów tworzenia GIF-ów w Internecie. Ponieważ ten samouczek dotyczy tworzenia GIF-a, aby animować działanie produktu, będziesz chciał nagrać część ekranu (za pomocą rejestratora ekranu), a następnie przekonwertować plik wideo na plik GIF. Pamiętaj, aby utworzyć plik GIF tak mały, jak to możliwe, aby ograniczyć rozmiar pliku i czas ładowania. Po utworzeniu GIF-a będziesz mógł go używać tak, jak każdego innego obrazu w Divi.

Jeśli chcesz dowiedzieć się, jak stworzyć GIF za pomocą Snagit, zapoznaj się z naszym postem na temat przełączania obrazu tła za pomocą animowanego gifu po najechaniu kursorem.

Dodawanie efektu 3D do GIF-a w Divi

Teraz nadszedł czas, aby dodać GIF do Divi, abyśmy mogli go stylizować z fajnym efektem 3D.

Aby rozpocząć, dodaj nową zwykłą sekcję z wierszem z dwiema kolumnami.

Zanim dodasz moduł, musimy dodać właściwość Perspektywa do kolumny, która będzie zawierała nasz GIF. Aby to zrobić, otwórz ustawienia wiersza i dodaj następujący fragment kodu CSS do głównego elementu kolumny 1:

perspective: 1000px;

Ta właściwość perspektywy jest niezbędna, aby dodać perspektywę do elementu w kolumnie. Element potrzebuje perspektywy, abyśmy mogli uzyskać efekt 3D podczas korzystania z opcji transformacji Divi. Aby lepiej zrozumieć, zapoznaj się z naszym postem na temat wykorzystania perspektywy z opcjami transformacji do projektowania ścian ze zdjęciami 3D.

Teraz dodaj moduł obrazu do kolumny 1.

Prześlij GIF do modułu obrazu. W przypadku tego projektu GIF powinien mieć około 600 na 700 pikseli.

Następnie użyj opcji transformacji, aby skalować, obracać i pochylać GIF w przestrzeni 3D.

Przekształć Obróć oś Y: 8 stopni
Przekształć Obróć oś X: 28 stopni

Przekształć skośną oś Y: 10 stopni
Przekształć pochylenie osi X: -8 stopni

Skala transformacji (tablet): 80%

Spójrzmy teraz na wynik.

Dodawanie efektu 3D do wideo HTML5 w Divi

Zanim dodamy efekt 3D, najpierw musimy stworzyć nasze wideo HTML5. Poniżej omówimy kroki, jak to zrobić. Ale jeśli chcesz uzyskać pełniejsze wyjaśnienie, zapoznaj się z naszym postem na temat korzystania z wideo HTML5 do tworzenia animowanych gifów w mniejszych rozmiarach plików.

Tworzenie kodu do osadzania wideo HTML5

Element wideo HTML5 ma następującą podstawową strukturę.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Nie musisz dużo wiedzieć o HTML, aby zobaczyć, co robi ten kod. Wewnątrz elementu <video> masz dwa elementy <source> , które przechowują ścieżkę/adres URL do plików wideo, które chcesz wyświetlić. Każdy element źródłowy zawiera wideo w innym formacie pliku (webm i mp4). Oba są niezbędne do maksymalnego wsparcia przeglądarki. Ważna jest również kolejność. Wideo webm jest umieszczane w kodzie nad wideo MP4, ponieważ jest to format wideo o wyższej jakości, ale jest mniej obsługiwany przez przeglądarki. Jeśli więc przeglądarka obsługuje wideo webm, wyświetli je. Ale jeśli przeglądarka nie obsługuje wideo webm, użyje formatu wideo mp4 poniżej. Nie jest konieczne uwzględnienie obu formatów wideo, ale jest to najlepsza praktyka. A jeśli zamierzasz używać tylko jednego, użyj formatu mp4, ponieważ jest on szerzej obsługiwany.

W rzeczywistości za każdym razem, gdy używasz modułu wideo Divi do wyświetlania samodzielnie hostowanych filmów, Divi tworzy ten sam element wideo HTML5 do wyświetlania filmów. Dlatego moduł Wideo pozwala na dodanie zarówno pliku wideo mp4, jak i webm.

Aby użyć kodu do własnego wideo, wystarczy dodać adres URL wideo w nawiasach po atrybucie src .

Jeśli prześlesz pliki wideo do swojej witryny WordPress, możesz pobrać adresy URL z biblioteki multimediów.

Następnie wklej adresy URL wideo w nawiasach po atrybucie src .

Po zakończeniu powinno wyglądać mniej więcej tak.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Następnie dodamy cztery atrybuty sterujące wyświetlaniem i funkcjonalnością wideo. Ten rodzaj kontroli jest głównym powodem ręcznego wstawiania wideo HTML5 zamiast korzystania z modułu wideo Divi. Te atrybuty obejmują autoplay (aby wideo uruchamiało się automatycznie), loop (aby wideo było powtarzane), muted (aby wideo nie odtwarzało dźwięku) i playsinline (aby wideo było odtwarzane w obszarze odtwarzania elementu). Aby zastosować te atrybuty do filmu, dodaj każdy z atrybutów w nawiasach klamrowych początkowego tagu <video> .

Teraz kod będzie wyglądał tak.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Uwaga: Normalnie zastosujesz atrybut controls dla filmów HTML5, ale w tym przypadku pominiemy go, aby wideo działało jak GIF.

Teraz jesteś gotowy do osadzenia kodu.

Osadzanie wideo HTML5

Aby umieścić wideo HTML5 na swojej stronie, możemy użyć modułu kodu.

Zanim zastąpimy moduł obrazu GIF naszym modułem kodu, przejdźmy dalej i zduplikujmy całą sekcję, abyśmy mogli zachować nasz przykład z GIF-em. W zduplikowanej sekcji usuń moduł obrazu i dodaj w jego miejsce moduł tekstowy.

Następnie wklej kod do osadzania wideo HTML5 w polu wprowadzania kodu.

Następnie skopiuj style transformacji z modułu obrazu i wklej style transformacji do modułu kodu. Lub możesz zaktualizować style transformacji w następujący sposób:

Przekształć Obróć oś Y: 8 stopni
Przekształć Obróć oś X: 28 stopni
Przekształć skośną oś Y: 10 stopni
Przekształć pochylenie osi X: -8 stopni
Skala transformacji (tablet): 80%

Ponieważ używam tego samego wideo, którego użyłem do stworzenia GIF-a, projekt będzie wyglądał bardzo podobnie. Jednak rozmiar wideo jest znacznie mniejszy niż rozmiar GIF. Oto wynik.

Ukończenie projektu układu przekroju

Teraz, gdy mamy już plik 3D GIF (lub wideo HTML5). Możemy dokończyć projekt naszego układu sekcji. W tym projekcie użyję sekcji z wideo HTML5 w kolumnie 1.

Dostosowywanie sekcji i rzędu

Otwórz ustawienia sekcji i zaktualizuj poniższe.

Wyściółka: 15% góra, 15% dół

Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Kolor lewego gradientu tła: #ba7fe8
Prawy gradient tła: #4b84ff

Maksymalna wysokość: 300px (komputer), brak (tablet i telefon)

Padding: 0px na górze, 0px na dole

Następnie możemy nadać rzędowi półprzezroczysty cień wewnętrznego pudełka, aby uzyskać unikalny element projektu.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 0px
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 40px
Kolor cienia: rgba (255,255,255,0.89)

Pozycjonowanie modułu kodu

Teraz zwiększmy nieco moduł kodu z wideo, dostosowując właściwość transform translate w następujący sposób:

Transform Translate Y Axis: -20% (komputer), -7% (telefon)

Dodawanie modułu wezwania do działania

Aby zakończyć projekt, dodajmy moduł call to action do kolumny 2. Będzie to świetne miejsce do dodania opisu polecanego produktu za pomocą przycisku.

Dodaj adres URL łącza przycisku, aby przycisk był wyświetlany.

Kontynuuj aktualizację ustawień w następujący sposób:

Kolor tła: #ffffff
Wyrównanie tekstu: do lewej
Kolor tekstu: ciemny

Czcionka tytułu: Lato
Grubość czcionki tytułu: pogrubiona
Kolor tekstu tytułu: #20292f
Czcionka ciała: Lato
Kolor tekstu ciała: #6d7c90
Rozmiar tekstu ciała: 17px
Wysokość linii ciała: 1,8 em

Rozmiar tekstu przycisku: 12px
Kolor tekstu przycisku: #ffffff
Kolor tła przycisku: #4b84ff
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 100px
Odstępy między przyciskami: 2px
Czcionka przycisku: Lato
Grubość czcionki przycisku: Ciężka
Styl czcionki przycisku: TT
Wypełnienie przycisków: 12px góra, 12px dół, 20px w lewo, 20px w prawo

Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozprzestrzeniania się cieni w pudełku: 40px
Kolor cienia: rgba (103.151.255.0.11)

Marża: 10% racja

Transform Translate Y Axis: -33% (komputer), -15% (telefon)
Przekształć Przesuń oś X: -5%

Ostateczny wynik

Pulpit

Tablet

Telefon

Końcowe przemyślenia

Dodanie efektu 3D do filmów GIF i HTML5 naprawdę daje wyjątkowy wygląd animacji produktów. Opcje transformacji Divi (w połączeniu z właściwością perspektywy) ułatwiają dodawanie efektów 3D do GIF-ów i filmów.

Miejmy nadzieję, że nauczyłeś się kilku rzeczy o tym, jak korzystać z GIF-ów i filmów HTML5 w Divi. Pliki GIF są proste w użyciu, ale trudniejsze do utrzymania przyjaznego rozmiaru pliku w Internecie. Filmy HTML5 wymagają użycia kodu do osadzania, ale mogą bardzo dobrze zastąpić GIF w przypadku dłuższych animacji.

Zachęcamy do odkrywania nowych i ekscytujących sposobów wykorzystania tego projektu do prezentacji animacji produktów i usług w kolejnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!