So fügen Sie Ihrer WordPress-Website einen Videohintergrund hinzu

Der Videohintergrund ist eine der fabelhaftesten Funktionen einer Website. Es kann Ihre Website nicht nur lebendig und interessant machen, sondern auch mehr Bilder und Informationen anzeigen. Ich wette jedoch, dass nicht viele Leute wissen, wie man ihren Websites einen Videohintergrund hinzufügt. Daher ist diese ultimative Anleitung hilfreich, wenn Sie Ihrer Website einen Videohintergrund hinzufügen möchten.

Verwenden Sie ein WordPress-Theme, das Videohintergrund unterstützt

Einige WordPress-Themes unterstützen die Anzeige des Videohintergrunds, Sie müssen also nur das Thema einrichten, um es zu präsentieren.

Dieses Clean Blocks-Thema unterstützt beispielsweise den Videohintergrund im Header-Cover-Bereich. Dann brauchen Sie nur ein paar einfache Schritte, um ein Video einzufügen, indem Sie zum Customizer gehen, den Abschnitt Header-Medien suchen und den Anforderungen des Themas folgen.

Bei den meisten Themes können Sie ein Video hochladen. Außerdem werden viele eingebettete Links von YouTube unterstützen, wie ich es oben getan habe. Dies wird nicht nur schneller und einfacher sein, sondern auch dazu beitragen, dass die Website leichter wird, wodurch die Geschwindigkeit der Website optimiert wird. Jedes Thema wird auf unterschiedliche Weise angepasst, daher müssen Sie die Anweisungen sorgfältig lesen.

Der Videohintergrundbereich kann jedoch eingeschränkt sein, wenn Sie Designs verwenden, da Designs möglicherweise nur Videos unterstützen, die in einem bestimmten Bereich ausgeführt werden. Was ist, wenn Sie einem anderen Bereich einen Videohintergrund hinzufügen möchten? Es ist an der Zeit, ein Plugin zu verwenden, um Ihrer WordPress-Website einen Videohintergrund hinzuzufügen.

Verwenden Sie ein Plugin, um der Website einen Videohintergrund hinzuzufügen

Es gibt viele Plugins, die Ihnen dabei helfen können. Nach Recherchen habe ich festgestellt, dass das Advanced WordPress Background (AWP)-Plugin für diejenigen, die nicht viel über Technologie wissen, sehr einfach zu bedienen ist. Es hilft auch, dass Ihr Videohintergrund schön angezeigt wird, und bietet viele Anpassungsoptionen.

Beachten Sie, dass dieses Plugin nur mit der WordPress 5.0-Version und dem Gutenberg-Editor funktioniert. Denken Sie also daran, Ihre WordPress-Version zu aktualisieren und diesen Editor zu verwenden.

Schritt 1: Installieren Sie das Plugin

Sie können dieses Plugin unter wordpress.org herunterladen, dann zu Dashboard > Plugin > Neu hinzufügen > Plugin hochladen gehen, hochladen, installieren und aktivieren.

Oder suchen Sie in Dashboard > Plugin > Neu hinzufügen das Plugin und klicken Sie auf Installieren > Aktivieren .

Schritt 2: Fügen Sie einen Videohintergrund hinzu

Das Hinzufügen eines Videohintergrunds ähnelt dem Einfügen eines Blocks in Gutenberg. Wenn Sie also mit Gutenberg vertraut sind, ist es ganz einfach. Wenn nicht, können Sie die Anweisungen zur Verwendung von Gutenberg lesen.

Gehen Sie zu einer Seite oder einem Artikel, dem Sie einen Videohintergrund hinzufügen möchten, fügen Sie einen neuen Block hinzu und suchen Sie nach dem Schlüsselwort „awb“, um den Hintergrundblock von AWB zu finden.

Nachdem Sie diesen Block eingefügt haben, wählen Sie in der rechten Seitenleiste die Registerkarte Block , um ihn einzurichten. Es gibt 3 Optionen für den Hintergrund, nämlich Bild, Farbe und Video. Wählen Sie Video , um einen Videohintergrund einzufügen. Dann haben Sie 2 Möglichkeiten: Fügen Sie das Video von der YouTube- oder Vimeo-URL ein oder laden Sie selbst gehostete Videos hoch.

Wenn Sie die erste Option wählen, müssen Sie nur den Link in den Abschnitt Video-URL einfügen.

Für die zweite Option gehen Sie zum Abschnitt Self Hosted . Es gibt 3 Arten von Videoformaten zum Hochladen:

Wählen Sie das gewünschte Format aus und wählen Sie dann ein vorhandenes Video in der Bibliothek aus oder laden Sie ein neues hoch. Das ist es.

Schritt 3: Passen Sie Ihren Videohintergrund an

Video mit voller Höhe anzeigen und Videoblock hinzufügen

Nach dem Einfügen des Videos ist sein Rahmen so klein. Um das Video in voller Höhe anzuzeigen, wählen Sie den Abschnitt Volle Höhe in der Symbolleiste des Blocks.

Unten ist der Videohintergrund in voller Höhe mit Texten dargestellt. Sie können die Größe, Farbe, Position usw. für die Texte normalerweise auf der Registerkarte Block in der Seitenleiste anpassen. Dies ist nützlich, wenn Sie dieses Video in das Header-Cover oder den Call-to-Action-Abschnitt einfügen möchten.

Sie können die Texte sogar durch einen beliebigen Block ersetzen. Dies ist ähnlich dem Einfügen eines Gutenberg-Blocks.

Video-Einstellungen

Auf der Registerkarte Video sollten Sie einige Hauptabschnitte wie folgt einstellen, um Ihren Videohintergrund bequem anzuzeigen:

(1): Sie können Hintergrundvideo auf Mobilgeräten aktivieren oder deaktivieren.
(2) und (3): Geben Sie hier die Start- und Endzeit des Videos ein, um den gewünschten Teil anzuzeigen, insbesondere wenn das Originalvideo zu lang ist.
(4): Sie können das Video wiederholen, wenn es fertig ist. Ich denke, Sie sollten diese Funktion aktivieren, um die automatische Wiedergabe des Videos beizubehalten.

Posterbildeinstellungen

Wenn Sie nach unten scrollen, sehen Sie den Abschnitt Posterbild . Das hier ausgewählte Foto wird 1 Sekunde vor der Anzeige des Videos angezeigt. Mit den folgenden Optionen können Sie die richtige Größe und den richtigen Stil des Bildes anpassen.

Hier ist das Ergebnis nach dem Hinzufügen des Posterbildes.

Overlay installieren

(1) ist die Überlagerungsfarbe für den Videohintergrund und (2) ist die Transparenz der Überlagerung. Orange ist beispielsweise der Hauptton meiner Website, daher habe ich diese Farbe für das Overlay des Videos ausgewählt, um sie an das Design des Webs anzupassen.

Die Farbpalette ist eine Alternative zum Video. Mit anderen Worten, Sie wechseln tatsächlich von einem Videohintergrund zu einem farbigen Hintergrund. Um diesen farbigen Hintergrund zu entfernen, wählen Sie die Schaltfläche Löschen.

Installieren Sie Parallax- und Mausparallax-Effekte

Auf der Registerkarte Parallaxe können Sie diese Effekte ein- oder ausschalten und ganz einfach verschiedene Arten von Parallaxen auswählen. Dies ist ein sehr schöner und interessanter Effekt, daher sollten Sie ihn verwenden und einen geeigneten Stil für Ihre Website auswählen.

Der Parallaxeneffekt ist Ihnen vielleicht bekannt, der Mausparallaxeneffekt nicht. Es ist leicht zu erkennen, wenn Sie mit der Maus über das Video fahren, dann bewegt sich auch die Szene innerhalb des Videos.

Sie können diesen Effekt verwenden, indem Sie zum Abschnitt Mausparallaxe > Aktivieren gehen . Dann können Sie Größe und Geschwindigkeit anpassen. Je niedriger die Geschwindigkeit ist, desto schneller bewegt sich das Video. Je kleiner die Größe ist, desto mehr bewegt sich das Video, sodass Sie das Gefühl haben, dass das Video „ruckelt“, wenn Sie die Maus darauf bewegen.

Hier ist ein Beispiel, wenn ich die niedrigste Geschwindigkeit und Größe wähle.

Abstandseinstellungen

In der Registerkarte Abstand, benutzerdefinierte der Abstand von dem Video zum Rand der Seite, geben Sie die Entfernungsparameter in die Margin und Padding Abschnitte. Zum Beispiel habe ich für alle 4 Seiten des Videos den Padding von 10 und den Rand von 20 eingegeben.

Erweiterte Einstellungen

Unter Zusätzliches CSS des Abschnitts Erweitert können Sie benutzerdefinierten Code für den Videohintergrund hinzufügen. Und der Abschnitt HTML- Anker ermöglicht es Ihnen, den Keyword-Link für die Überschrift im Video zu verwenden. Wenn Sie sich mit Shortcodes nicht auskennen, können Sie diesen Teil überspringen.

Und das ist das Endergebnis. Das Video sieht ganz nett aus, oder?

Letzte Worte

Durch diesen super detaillierten Artikel hoffe ich, dass Sie Ihrer WordPress-Website einen Videohintergrund hinzufügen können, um Besucher anzuziehen. Über AWB-Plugins sollten Sie es mit einem Thema verwenden, das Gutenberg stark unterstützt, wie z. B. eStar. Hier habe ich das eStar-Theme und das AWB-Plugin verwendet, um einen attraktiven Videohintergrund für das Header-Cover zu haben.

Diese perfekte Kombination kann das Video faszinierender aussehen lassen, oder? Wenn Sie weitere Tipps zu WordPress erfahren möchten, zögern Sie nicht, unter diesem Artikel einen Kommentar zu hinterlassen und Ihre Gedanken zu teilen.