Hinzufügen von 3D-Effekten zu GIFs und HTML5-Videos, um einzigartige Produktanimationen in Divi . anzuzeigen
Veröffentlicht: 2019-06-20Animierte GIFs und HTML5-Videos eignen sich hervorragend, um zu animieren, wie ein Produkt auf Ihrer Website funktioniert. Diese kurzen Animationen vermitteln dem Besucher wertvolle Informationen auf eine leichter verdauliche Weise als ein normales Video. Das Hinzufügen dieser Art von GIFs und HTML5-Videos ist mit Divi ziemlich einfach. Und mit etwas Kreativität können Sie 3D-Effekte für einzigartige Produktanimationen hinzufügen.
In diesem Tutorial zeige ich Ihnen, wie Sie GIFs und HTML5-Videos 3D-Effekte hinzufügen, um einzigartige Produktanimationen in Divi anzuzeigen. Dieses Design funktioniert wirklich gut für diejenigen, die ein kreatives Layout suchen, um ein vorgestelltes Produkt oder eine Dienstleistung zu präsentieren. Dazu müssen wir zunächst verstehen, wie Sie mithilfe von Divi GIFs und HTML5-Videoeinbettungen zu Ihrer Seite hinzufügen. Dann können wir die Transformationsoptionen von Divi verwenden, um das GIF (oder Video) im 3D-Raum zu positionieren und zu drehen. Zum Abschluss werden wir einige Divi-Designtechniken verwenden, um ein schönes Abschnittslayout zu erstellen, das zu diesen 3D-GIFs und -Videos passt.
Lass uns anfangen.
Vorgeschmack
Hier ist ein kleiner Einblick in das Design, das wir in diesem Tutorial erstellen werden. Das Design sieht ähnlich aus, wenn ein GIF und ein HTML5-Video verwendet werden, um die Produktanimationen zu erstellen.
Laden Sie die 3D-Effekte für GIF- und HTML5-Videos Produktanimationen Divi Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Kostenlos herunterladen
Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.
Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, ja?
Abonnieren Sie unseren Youtube-Kanal
Verwenden von GIFs für kurze Produktanimationen
GIFs gibt es schon lange. Dies liegt wahrscheinlich daran, dass GIFs einfach zu erstellen sind und in allen Browsern weithin unterstützt werden. Und sie können gut für wirklich kurze Produktanimationen funktionieren. Da ein GIF ein Bild ist, können Sie es in einem Divi Image-Modul wie jedes andere JPG oder PNG verwenden. Auf diese Weise können Sie das GIF mit der vollen Leistung der integrierten Einstellungen von Divi stylen. Aber seien Sie gewarnt, GIFs mit einer längeren Dauer und einer höheren Bildrate können zu wirklich großen Dateigrößen führen. Halten Sie Ihre GIFs daher am besten kurz und so klein wie möglich.
Verwenden von HTML5-Video als GIF-Ersatz
HTML5-Videos werden zu einem beliebten GIF-Ersatz, insbesondere für längere Produktanimationen. Sie haben vielleicht bemerkt, dass sie im neuen Design der Elegant Themes-Website verwendet werden. Sie sind im Vergleich zu GIFs deutlich kleiner und benötigen daher weniger Zeit zum Laden. Und das Hinzufügen eines HTML5-Videos zu Ihrer Divi-Site ist ganz einfach. Alles, was Sie tun müssen, ist das HTML5-Videoelement hinzuzufügen, um das Video in Ihre Seite einzubetten (ähnlich wie Sie einen Video-Shortcode in WordPress hinzufügen würden). Sie können das Video auch mit versteckten Steuerelementen, Looping und Autoplay anpassen, was zu einer hochwertigen Animation führt, die wie ein GIF funktioniert. Außerdem können Sie beim Hinzufügen der Einbettung zu einem Divi-Modul auch den Divi-Builder verwenden, um das Video auf kreative Weise zu gestalten.
In diesem Beitrag erfahren Sie, warum Sie HTML5-Videos anstelle von regulären GIFs verwenden sollten.
Da wir nun etwas mehr über die Verwendung von GIFs und HTML5-Videos wissen, können wir sie in Divi verwenden.
Was Sie für dieses Tutorial benötigen
Um zu beginnen, benötigen Sie Folgendes:
- Ein GIF-Bild
- Eine MP4-Videodatei (und die URL zu dieser Videodatei), die in der HTML5-Videoelement-Einbettung verwendet werden soll. Für maximale Browserunterstützung können Sie das gleiche Video auch im Webm-Format einbinden (dazu später mehr).
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Hinzufügen eines 3D-Effekts zu einem animierten GIF- oder HTML5-Video
Bevor wir zu weit gehen, um das komplette Abschnittslayout für dieses Tutorial zu entwerfen, dachte ich, es wäre am besten, Ihnen zu zeigen, wie Sie den 3D-Effekt sowohl einem GIF- als auch einem HTML5-Video hinzufügen. Sobald wir fertig sind, werden wir den Rest des Abschnittslayouts mit einem schönen modernen Design aufpolieren.
Beginnen wir zunächst mit dem Hinzufügen des 3D-Effekts zu einem GIF in Divi.
GIF erstellen
Es gibt viele Möglichkeiten, ein GIF im Web zu erstellen. Da es in diesem Tutorial darum geht, ein GIF zu erstellen, um die Funktionsweise eines Produkts zu animieren, sollten Sie einen Abschnitt Ihres Bildschirms (mit einem Bildschirmrekorder) aufzeichnen und dann die Videodatei in eine GIF-Datei konvertieren. Denken Sie daran, das GIF so klein wie möglich zu erstellen, um die Dateigröße und die Ladezeit zu begrenzen. Sobald das GIF erstellt wurde, können Sie es wie jedes andere Bild in Divi verwenden.
Wenn Sie erfahren möchten, wie Sie mit Snagit ein GIF erstellen, lesen Sie unseren Beitrag zum Wechseln eines Hintergrundbilds mit einem animierten Gif beim Hover.
Hinzufügen eines 3D-Effekts zu einem GIF in Divi
Jetzt ist es an der Zeit, das GIF zu Divi hinzuzufügen, damit wir es mit einem coolen 3D-Effekt stylen können.
Fügen Sie zunächst einen neuen regulären Abschnitt mit einer zweispaltigen Zeile hinzu.
Bevor Sie ein Modul hinzufügen, müssen wir die perspektivische Eigenschaft der Spalte hinzufügen, die unser GIF enthält. Öffnen Sie dazu die Zeileneinstellungen und fügen Sie das folgende CSS-Snippet zum Hauptelement von Spalte 1 hinzu:
perspective: 1000px;
Diese perspektivische Eigenschaft ist erforderlich, um dem Element innerhalb der Spalte eine Perspektive hinzuzufügen. Ein Element benötigt eine Perspektive, damit wir einen 3D-Effekt erzielen können, wenn wir die Transformationsoptionen von Divi verwenden. Zum besseren Verständnis lesen Sie unseren Beitrag zur Verwendung der Perspektive mit Transformationsoptionen zum Gestalten von 3D-Fotowänden.
Fügen Sie nun in Spalte 1 ein Bildmodul hinzu.
Laden Sie das GIF in das Bildmodul hoch. Für dieses Design sollte das GIF etwa 600 x 700 Pixel groß sein.
Verwenden Sie dann die Transformationsoptionen, um das GIF im 3D-Raum zu skalieren, zu drehen und zu neigen.
Transformieren Y-Achse drehen: 8deg
Transformieren X-Achse drehen: 28deg
Transformieren Sie Skew Y-Achse: 10deg
Transformieren Sie Skew X-Achse: -8deg
Transformationsskala (Tablet): 80%
Schauen wir uns nun das Ergebnis an.
Hinzufügen eines 3D-Effekts zu einem HTML5-Video in Divi
Bevor wir den 3D-Effekt hinzufügen, müssen wir zuerst unser HTML5-Video erstellen. Wir werden die Schritte dazu unten durchgehen. Wenn Sie jedoch eine umfassendere Erklärung wünschen, lesen Sie unseren Beitrag zur Verwendung von HTML5-Videos zum Erstellen animierter Gifs bei kleineren Dateigrößen.
Erstellen des HTML5-Video-Einbettungscodes
Das HTML5-Videoelement hat die folgende Grundstruktur.
<video>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Sie müssen nicht viel über HTML wissen, um zu sehen, was dieser Code macht. Innerhalb des <video> -Elements befinden sich zwei <source> -Elemente, die den Pfad/die URL zu den Videodateien enthalten, die Sie anzeigen möchten. Jedes Quellelement hat ein Video in einem anderen Dateiformat (webm und mp4). Beides ist für eine maximale Browserunterstützung erforderlich. Auch die Reihenfolge ist wichtig. Das Webm-Video wird im Code über dem mp4-Video platziert, da es sich um ein qualitativ hochwertigeres Videoformat handelt, das jedoch von Browsern weniger unterstützt wird. Wenn also ein Browser Webm-Video unterstützt, wird es angezeigt. Wenn der Browser jedoch kein Webm-Video unterstützt, wird das darunter liegende mp4-Videoformat verwendet. Es ist nicht notwendig, beide Videoformate einzuschließen, aber es wird empfohlen. Und wenn Sie nur eines verwenden möchten, verwenden Sie das mp4-Format, da es breiter unterstützt wird.
Immer wenn Sie das Videomodul von Divi verwenden, um selbst gehostete Videos anzuzeigen, erstellt Divi dasselbe HTML5-Videoelement zum Anzeigen von Videos. Aus diesem Grund können Sie mit dem Videomodul sowohl eine mp4- als auch eine webm-Videodatei hinzufügen.
Um den Code für Ihr eigenes Video zu verwenden, müssen Sie einfach die Video-URL in Klammern nach dem src Attribut hinzufügen.
Wenn Sie die Videodateien auf Ihre WordPress-Site hochladen, können Sie die URLs aus der Medienbibliothek abrufen.
Fügen Sie dann die Video-URLs in die Klammern nach dem src Attribut ein. 
Es sollte ungefähr so aussehen, wenn Sie fertig sind.
<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>
Als Nächstes fügen wir vier Attribute hinzu, um die Anzeige und Funktionalität des Videos zu steuern. Diese Art der Steuerung ist der Hauptgrund für das manuelle Einfügen des HTML5-Videos, anstatt das Divi-Videomodul zu verwenden. Zu diesen Attributen gehören autoplay (damit das Video automatisch startet), loop (damit das Video wiederholt wird), muted (damit das Video kein Audio playsinline ) und playsinline (damit das Video im Wiedergabebereich des Elements playsinline wird). Um diese Attribute auf das Video anzuwenden, fügen Sie jedes der Attribute in die Klammern des beginnenden <video> -Tags ein.
Jetzt sieht der Code so aus.
<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>
Hinweis: Normalerweise würden Sie das controls für HTML5-Videos anwenden, aber in diesem Fall lassen wir es weg, damit das Video wie ein GIF funktioniert.
Jetzt können Sie den Code einbetten.
Einbetten des HTML5-Videos
Um ein HTML5-Video in Ihre Seite einzubetten, können wir das Codemodul verwenden.
Bevor wir das GIF-Bildmodul durch unser Codemodul ersetzen, duplizieren wir den gesamten Abschnitt, damit wir unser GIF-Beispiel beibehalten können. Löschen Sie im duplizierten Abschnitt das Bildmodul und fügen Sie an seiner Stelle ein Textmodul hinzu.
Fügen Sie dann den HTML5-Videoeinbettungscode in das Codeeingabefeld ein.
Kopieren Sie dann die Transformationsstile aus dem Bildmodul und fügen Sie die Transformationsstile in das Codemodul ein. Oder Sie können die Transformationsstile wie folgt aktualisieren:
Transformieren Y-Achse drehen: 8deg
Transformieren X-Achse drehen: 28deg
Transformieren Sie Skew Y-Achse: 10deg
Transformieren Sie Skew X-Achse: -8deg
Transformationsskala (Tablet): 80%
Da ich dasselbe Video verwende, mit dem ich das GIF erstellt habe, sieht das Design sehr ähnlich aus. Die Größe des Videos ist jedoch deutlich kleiner als die Größe des GIF. Hier ist das Ergebnis.
Fertigstellung des Entwurfs des Abschnittslayouts
Jetzt haben wir das 3D-GIF (oder HTML5-Video) eingerichtet. Wir können das Design unseres Abschnittslayouts abschließen. Für dieses Design verwende ich den Abschnitt mit dem HTML5-Video in Spalte 1.
Anpassen des Abschnitts und der Reihe
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes.
Polsterung: 15 % oben, 15 % unten
Öffnen Sie dann die Zeileneinstellungen und aktualisieren Sie Folgendes:
Hintergrundfarbe links: #ba7fe8
Hintergrund mit Farbverlauf rechts: #4b84ff
Maximale Höhe: 300px (Desktop), keine (Tablet und Telefon)
Padding: 0px oben, 0px unten
Als nächstes können wir der Reihe einen halbtransparenten Innenkastenschatten für ein einzigartiges Designelement geben.
Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 0px
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenausbreitung: 40px
Schattenfarbe: rgba (255,255,255,0,89)
Positionierung des Codemoduls
Bringen wir nun das Codemodul mit dem Video ein wenig nach oben, indem wir die Eigenschaft transform translate wie folgt anpassen:
Transformieren Y-Achse übersetzen: -20% (Desktop), -7% (Telefon)
Hinzufügen eines Call-to-Action-Moduls
Um das Design abzuschließen, fügen wir Spalte 2 ein Call-to-Action-Modul hinzu. Dies ist ein großartiger Ort, um eine Beschreibung des vorgestellten Produkts mit einer Schaltfläche hinzuzufügen.
Fügen Sie eine Schaltflächenlink-URL hinzu, damit die Schaltfläche angezeigt wird.
Aktualisieren Sie die Einstellungen wie folgt weiter:
Hintergrundfarbe: #ffffff
Textausrichtung: Links
Textfarbe: Dunkel
Titelschriftart: Lato
Schriftstärke des Titels: Fett
Titeltextfarbe: #20292f
Körperschriftart: Lato
Textkörperfarbe: #6d7c90
Körpertextgröße: 17px
Körperlinienhöhe: 1.8em
Schaltflächentextgröße: 12px
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #4b84ff
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 100px
Tastenabstand der Buchstaben: 2px
Schaltflächenschrift: Lato
Tastenschriftgewicht: Schwer
Schaltflächenschriftart: TT
Tastenpolsterung: 12 Pixel oben, 12 Pixel unten, 20 Pixel links, 20 Pixel rechts
Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenausbreitung: 40px
Schattenfarbe: rgba(103,151,255,0.11)
Marge: 10% richtig
Transformieren Y-Achse übersetzen: -33% (Desktop), -15% (Telefon)
Transformieren X-Achse übersetzen: -5%
Endergebnis
Desktop
Tablette
Telefon
Abschließende Gedanken
Das Hinzufügen des 3D-Effekts zu GIFs und HTML5-Videos bietet wirklich eine einzigartige Anzeige für diese Produktanimationen. Die Transformationsoptionen von Divi (in Kombination mit der perspektivischen Eigenschaft) erleichtern das Hinzufügen von 3D-Effekten zu Ihren GIFs und Videos.
Und hoffentlich haben Sie ein paar Dinge über die Verwendung von GIFs und HTML5-Videos mit Divi gelernt. GIFs sind einfach zu verwenden, aber es ist schwieriger, die Dateigröße webfreundlich zu halten. HTML5-Videos erfordern die Verwendung eines Einbettungscodes, können aber sehr gut als GIF-Ersatz für längere Animationen funktionieren.
Fühlen Sie sich frei, neue und aufregende Möglichkeiten zu erkunden, dieses Design für die Präsentation von Animationen für Produkte und Dienstleistungen in Ihrem nächsten Projekt zu verwenden.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!