WordPress-Hintergrundvideo: Fügen Sie es auf zwei verschiedene Arten hinzu
Veröffentlicht: 2023-07-25Möchten Sie Ihre WordPress-Website spannender und fesselnder gestalten? Eine gute Möglichkeit hierfür ist das Hinzufügen eines Hintergrundvideos. Es ist eine coole Funktion, die sofort die Aufmerksamkeit der Leute auf sich zieht und Ihre Website ansprechender macht. Aber wie fügt man in WordPress einen Videohintergrund hinzu?
Wenn Sie nach den einfachen Schritten zum Hinzufügen eines WordPress-Hintergrundvideos fragen, dann-
- Erstellen Sie einen Beitrag/bearbeiten Sie einen vorhandenen Beitrag
- Abdeckblock hinzufügen
- Fügen Sie nun das Video hinzu, indem Sie es hochladen oder aus der Medienbibliothek
- Passen Sie es abschließend an
Es sieht einfach aus, aber es gibt einige zusätzliche Arbeit. Mach dir keine Sorge; In diesem Artikel haben wir alles richtig erklärt. Nun, es ist nicht nur die Art und Weise; Wir haben eine weitere Möglichkeit hinzugefügt, mit PostX Videos als Website-Hintergrund hinzuzufügen.
Sehen wir uns also an, wie man in WordPress einen Videohintergrund hinzufügt.
WordPress-Hintergrundvideo: So fügen Sie mit dem Standardblockeditor hinzu
Hier sind wir also beim Hauptsegment. Möglicherweise möchten Sie keinen zusätzlichen Aufwand, wie zum Beispiel das Hinzufügen eines Plugins zum Einfügen von Videos als WordPress-Hintergrund. Beginnen wir also mit dem Standard-Gutenberg- oder Block-Editor. Nachfolgend fügen wir eine Schritt-für-Schritt-Anleitung hinzu, wie das geht.
Schritt 1: Melden Sie sich an und erstellen Sie einen Beitrag/eine Seite
Hier ist der allererste Schritt so grundlegend. Melden Sie sich bei Ihrem WordPress-Dashboard an und bewegen Sie den Cursor dann auf die Schaltfläche „+ Neu“. Fügen Sie dann je nach Wunsch einen Beitrag oder eine Seite hinzu.
Schritt 2: Fügen Sie den Abdeckblock hinzu
Klicken Sie nun auf die Schaltfläche „+“, um einen neuen Block hinzuzufügen. Geben Sie dann im Suchfeld „Cover“ ein und Sie sehen das Cover-Block-Symbol. Es sieht wie im folgenden Bild aus.
Schritt 3: Fügen Sie das Video hinzu
Nachdem Sie auf die Cover-Schaltfläche geklickt haben, wird der Block mit einigen Optionen angezeigt. Dort haben Sie zwei Möglichkeiten, ein Hintergrundvideo hinzuzufügen. Sie können entweder ein Video von Ihrem Computer hochladen, indem Sie auf die Schaltfläche „Hochladen“ klicken, oder ein Video aus Ihrer „Medienbibliothek“ auswählen.
Klicken Sie nun auf eines davon und wählen Sie das Video aus, das Sie als WordPress-Hintergrundvideo verwenden möchten.
Schritt 4: Alles anpassen
Die Aufgabe, nach der Sie suchen – das Hinzufügen eines WordPress-Videohintergrunds – ist jetzt erledigt. Aber jetzt ist es an der Zeit, alles anzupassen. Es gibt viele Optionen zum Anpassen. Im Folgenden besprechen wir einige gängige Anpassungen.
Fügen Sie eine Beschriftung für den Block hinzu
Die meisten Leute fügen dem Video eine Bildunterschrift hinzu. Hier müssen Sie nichts Besonderes tun. Das liegt daran, dass Sie standardmäßig „Titel schreiben…“ bemerken. Klicken Sie einfach hier und Sie sehen den Schreibcursor.
Jetzt können Sie ganz einfach einen beliebigen Titel/Zitat oder was auch immer Sie über dem Hintergrundvideo anzeigen möchten, hinzufügen. Außerdem finden Sie noch einige weitere Anpassungsoptionen, wie zum Beispiel:
- Absatz/Überschrift
- Textfarbe
- Textgröße
- Schwerpunktauswahl
Das ist es. Sie sind mit der Integration eines Hintergrundvideos in WordPress fertig.
Fügen Sie dem Video Stil hinzu
Nun ja, nur eine Bildunterschrift ist nicht alles. Sie können auch den Stil des Hintergrundvideos ändern. Klicken Sie dazu auf die Schaltfläche „Stil“ (die Schaltfläche sieht aus wie ein halber Schwarz-Weiß-Kreis), und Sie finden weitere Optionen zum Anpassen des Videos. Die Optionen umfassen
- Farbe (durchgehend und verlaufend)
- Overlay-Deckkraft
- Typografie
- Mindesthöhe der Abdeckung
Integrieren Sie nun den Stil nach Ihren persönlichen Vorlieben. Wir haben einfach Texte mit unterschiedlichen Größen und Farben hinzugefügt und sie entsprechend ausgerichtet. Hier ist die endgültige Ausgabe des WordPress-Hintergrundvideos von Gutenberg.
WordPress-Hintergrundvideo: So fügen Sie mit PostX hinzu
Die obige Methode war die Standardmethode. Wenn Sie es jedoch gerne individueller gestalten möchten und ein professionelleres Erscheinungsbild wünschen, empfehlen wir Ihnen die Verwendung unseres Plugins PostX. PostX bietet mehr Kontrolle über Ihre WordPress-Hintergrundvideos und ermöglicht Ihnen, diese mit verschiedenen Anpassungsoptionen einfach hinzuzufügen. Mit PostX können Sie Videos auch als vorgestellte Bilder anzeigen. So können Sie mit PostX ein Hintergrundvideo zu Ihrer WordPress-Website hinzufügen:
Schritt 1: Post installieren und aktivieren
Zuerst müssen Sie das PostX-Plugin auf Ihrer WordPress-Website installieren und aktivieren. Klicken Sie dazu mit dem Cursor auf den Abschnitt „Plugins“ in Ihrem WordPress-Dashboard und dann auf „Neu hinzufügen“.
Suchen Sie anschließend nach „PostX“. Sobald Sie das Plugin gefunden haben, klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“.
Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen
Schritt 2: Erstellen Sie einen neuen Beitrag oder bearbeiten Sie einen vorhandenen
Nach der Aktivierung von PostX können Sie einen neuen Beitrag erstellen oder einen vorhandenen bearbeiten, in dem Sie das Hintergrundvideo hinzufügen möchten. Sie können das Plugin auch auf Seiten oder anderen benutzerdefinierten Beitragstypen verwenden. Erstellen Sie nun einen neuen Beitrag, so wie ich es zuvor erklärt habe.
Schritt 3: Fügen Sie den Zeilen-/Spaltenblock hinzu
Klicken Sie nun wie beim vorherigen auf die Schaltfläche „+“, um einen neuen Block hinzuzufügen. Geben Sie dann im Suchfeld „Zeile“ ein und Sie finden das PostX-Zeilen-/Spaltenblocksymbol.
Hinweis: Möglicherweise sehen Sie zwei verschiedene Blöcke mit dem Namen „Reihe“. Lassen Sie sich nicht verwirren; Einer stammt aus dem Standardeditor und ein anderer aus PostX. Folgen Sie einfach dem Bild oben und wählen Sie den vorgeschlagenen Zeilen-/Spaltenblock aus.
Schritt 4: Wählen Sie das Layout
Nachdem Sie auf den Zeilenblock geklickt haben, sehen Sie zehn verschiedene Layouts wie „100“, „50:50“, „50:25:25“ usw. Wählen Sie eines davon entsprechend Ihren Anforderungen.
Kommen wir zum 100:00-Layout: Klicken Sie darauf.
Schritt 5: Klicken Sie auf Hintergrund und Wrapper
Nachdem Sie sich für das Layout entschieden haben, werden Sie feststellen, dass der Zeilenblock mit einem einzelnen Block darin erstellt wird.
Mit dem mitgelieferten Block haben Sie jetzt keine Arbeit mehr. Stattdessen liegt Ihre Hauptaufgabe nun im Row-Block. Klicken Sie nun auf die Schaltfläche „Blockieren“ (Sie finden sie direkt unter der Schaltfläche „Veröffentlichen“).
Dann sehen Sie viele Optionen zum Anpassen der Zeile. Unsere Hauptaufgabe besteht jedoch darin, ein WordPress-Hintergrundvideo hinzuzufügen. Suchen Sie also die Option „Hintergrund und Wrapper“ innerhalb der „Block-Schaltfläche“ und klicken Sie dann darauf. Wenn Sie es nicht finden können, schauen Sie sich einfach das Bild unten an.
Schritt 6: Laden Sie die Video-URL hoch
Klicken Sie nun auf die Schaltfläche und Sie finden unter der Hintergrundoption vier Optionen: Vollton, Farbverlauf, Bild und Video. Wählen Sie dort „Video“.
Hinweis: Wenn Sie PostX verwenden, können Sie ein Video nicht direkt hochladen. Sie müssen die Video-URL teilen. In den meisten Fällen ist es vorteilhafter.
Wenn Sie beispielsweise ein YouTube-Video hinzufügen möchten, kopieren Sie einfach die Video-URL und fügen Sie sie in das Feld „VIDEO-URL“ ein.
Aber bei jedem gespeicherten Video ist es etwas zeitaufwändig. Da es keine Möglichkeit gibt, Videos direkt hochzuladen, müssen Sie eine selbst gehostete URL teilen. Sie können Videos auf Ihre WordPress-Site hochladen und über den hochgeladenen Videolink hinzufügen.
Fügen Sie nun, genau wie Sie den YouTube-Videolink eingefügt haben, den selbstgehosteten Videolink in das Standard-Video-URL-Feld ein.
[Hinweis: Stellen Sie sicher, dass die gehostete Video-URL öffentlich zugänglich ist, da sonst niemand das Video sehen kann.]
Schritt 7: Passen Sie die Videoeinstellungen an
Nachdem Sie das Video hinzugefügt haben, bietet PostX einige zusätzliche Vorteile. Sie können beispielsweise die Videozeit anpassen. Füllen Sie einfach das Feld „Startzeit“ und „Endzeit“ entsprechend der Zeit und Position aus, an der das Video abgespielt werden soll.
Sie haben auch die Möglichkeit, „Video Loop“ zu aktivieren oder zu deaktivieren und das „Video-Fallback-Bild“ festzulegen.
Schritt 8: Elemente zum Inside-Block hinzufügen
Sie haben das Hintergrundvideo bereits hinzugefügt. Es ist Zeit, es zu entwerfen. Da wir ein 100:00-Layout ausgewählt haben, können Sie dem Layout ein einzelnes Element hinzufügen. Allerdings können wir darunter mehrere Blöcke hinzufügen.
Sie können auch den Pixel des Hintergrundvideos festlegen. Bewegen Sie dazu einfach den Cursor auf die mittlere obere oder untere Ecke des „Zeilen“-Blocks. Sobald Sie die Position erreicht haben, wird in der Zeile ein Pixel angezeigt. Sie können dann darauf klicken und es nach oben oder unten ziehen, um die Größe des Hintergrundvideos anzupassen.
Passen Sie es nun endlich nach Ihren Wünschen an. Wir bereiten jetzt ein kurzes, individuelles Hintergrundvideo vor. Lassen Sie es uns Schritt für Schritt überprüfen.
Praktischer Leitfaden zur Anpassung des WordPress-Videohintergrunds
Jetzt erstellen wir ein einfaches Hintergrundvideo, das eine Tourismusdienstleistung vorstellt.
Schritt 1: Befolgen Sie die vorherigen Schritte und fügen Sie das Video hinzu
Die Grundlagen haben wir bereits gelernt. Befolgen Sie einfach die folgenden Schritte und fügen Sie mithilfe des Zeilen-/Spaltenblocks von PostX ein WordPress-Hintergrundvideo hinzu.
Schritt 2: Überschrift zum vorhandenen Block hinzufügen
Jetzt haben wir ein 100:00-Layout ausgewählt. Dort können Sie einen einzelnen Artikel hinzufügen. Wir fügen den Block „Überschrift“ hinzu.
Fügen Sie nach dem Hinzufügen des Überschriftenblocks den Slogan/Dienst hinzu, den Sie in der Überschrift anzeigen möchten.
Schritt 3: Fügen Sie einen Absatzblock unter der Überschrift hinzu
Klicken Sie nun einfach auf die Eingabetaste oder klicken Sie auf die Schaltfläche „+“. Unter der Überschrift wird ein weiterer Block angezeigt. Es handelt sich standardmäßig um einen Absatzblock. Schreiben Sie nun in den Absatzblock, was Sie anbieten möchten. Zur besseren Sichtbarkeit behalten wir die Textfarbe „Weiß“ bei.
Schritt 4: CTA-Buttons hinzufügen
Gehen Sie nun auf die gleiche Weise vor und drücken Sie nach Abschluss des Absatzblocks die Eingabetaste. Ein neuer Block wird angezeigt. Fügen Sie nun die „Button Group“ von PostX hinzu.
Wir fügen zwei CTA-Buttons (Call to Action) hinzu, um Kunden mit unterschiedlichen Zwecken anzulocken. Um die Schaltflächen besser anzupassen, schauen Sie sich dieses Video an.
Die Erstellung des Hintergrundvideos ist nun abgeschlossen. Sehen wir uns die endgültige Ausgabe an.
Richtlinien zum Hinzufügen von Videohintergrund in WordPress
Hier sind einige empfohlene Richtlinien zum Hinzufügen eines Videohintergrunds zu Ihrer WordPress-Website:
Optimieren Sie die Dateigröße, ohne die Auflösung zu beeinträchtigen
Große Videos und Bilder können die Leistung Ihrer Website beeinträchtigen. Daher ist es wichtig, eine zu finden
Balance zwischen Dateigröße und Auflösung beim Komprimieren Ihrer Videos.
Gehen Sie sparsam mit Videos um
Vermeiden Sie eine Überfüllung Ihrer Website mit zu vielen Videos. Nutzen Sie sie stattdessen strategisch, um wichtige Punkte hervorzuheben oder relevante Inhalte zu präsentieren.
Fügen Sie einen Call-to-Action hinzu
Achten Sie bei der Verwendung eines Videohintergrunds darauf, zusätzliche Informationen oder eine klare Call-to-Action-Schaltfläche bereitzustellen. Wecken Sie bei den Zuschauern nicht den Wunsch nach mehr, ohne einen Link oder eine Anleitung anzubieten, um mehr zu erfahren.
Vermeiden Sie die automatische Wiedergabe mit Audio
Die automatische Audiowiedergabe beim Besuch Ihrer Website kann störend und störend sein. Es ist am besten, die automatische Audiowiedergabe ganz zu vermeiden.
Stellen Sie eine Option zur Audiowiedergabe bereit
Wenn Ihr Video Audio erfordert, geben Sie Benutzern die Möglichkeit, die Audiowiedergabe zu steuern. Dadurch können sie wählen, ob sie den Ton hören möchten oder nicht.
Ziehen Sie Untertitel in Betracht
Fügen Sie Untertitel für Videos mit Audio hinzu. Dies trägt dazu bei, dass Ihre Inhalte für alle Benutzer zugänglich sind, auch für diejenigen, die sich an einem Ort befinden, an dem sie keinen Ton abspielen können oder eine Hörbehinderung haben.
Hosten Sie Videos extern
Um eine optimale Leistung zu gewährleisten, sollten Sie die Verwendung externer Video-Hosting-Plattformen wie Vimeo oder YouTube in Betracht ziehen. Diese Plattformen sind speziell für das Hosting und Streaming von Videos konzipiert.
Halten Sie sich an die empfohlenen Formate und Auflösungen
Verwenden Sie beim Hochladen von Videos das MP4-Format mit einer Mindestauflösung von 720p. Stellen Sie außerdem sicher, dass die Videos mit dem h264-Codec kodiert sind, da dieser eine gute Qualität und Kompatibilität bietet.
Letzte Worte
Hoffentlich haben Sie jetzt richtig verstanden, wie Sie WordPress-Hintergrundvideos hinzufügen. Wir haben zwei Methoden hinzugefügt und beide Methoden haben Vor- und Nachteile.
Zusammenfassend würde ich sagen, wenn Sie ein Video als Hintergrund oder einen Videolink hinzufügen möchten, ist PostX die beste Option. Wenn Sie jedoch ein Video hochladen möchten, ist der Standardblock die einfachere Option für Sie.
Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen
PostX Beaver Builder-Integration: Verwenden Sie Gutenberg-Blöcke im Beaver Builder
So erstellen Sie WooCommerce-Produktvarianten
PostX 2.4.9: Was ist neu?
Anpassung des WordPress-Menüs im Twenty Twenty-Two-Theme