WordPress-Hintergrundvideo: Fügen Sie es auf zwei verschiedene Arten hinzu

Veröffentlicht: 2023-07-25

Mö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.

add new page
neue Seite hinzufügen

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.

add cover block
Abdeckblock hinzufügen

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.

upload video
Video hochladen

Klicken Sie nun auf eines davon und wählen Sie das Video aus, das Sie als WordPress-Hintergrundvideo verwenden möchten.

select video to upload
Wählen Sie das Video zum Hochladen aus

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.

add text
Bildunterschrift hinzufügen

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

style the video
Gestalten Sie das Video
  • 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.

final output of video background

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“.

Installing PostX
Installieren Sie PostX

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.

add new page
neue Seite hinzufügen

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.

add row column block
Zeilenspaltenblock hinzufügen

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.

choose layout
Layout wählen

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“).

background and wrapper setting
Hintergrund- und Wrapper-Einstellung

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“.

click on video option
Klicken Sie auf die Videooption

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.

add video url
Video-URL hinzufügen

[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.

adjust start and end time
Passen Sie die Start- und Endzeit an

Sie haben auch die Möglichkeit, „Video Loop“ zu aktivieren oder zu deaktivieren und das „Video-Fallback-Bild“ festzulegen.

enable video loop
Aktivieren Sie die Videoschleife

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.

customize the row
Passen Sie die Zeile an

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.

add heading block
Überschriftenblock hinzufügen

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.

add custom text
Fügen Sie benutzerdefinierten Text hinzu

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.

add cta button
CTA-Schaltfläche hinzufügen

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.

final output of background video

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

Gefällt Ihnen dieser Artikel? Verbreiten Sie es weiter
  • Use Gutenberg Blocks in Beaver Builder

    PostX Beaver Builder-Integration: Verwenden Sie Gutenberg-Blöcke im Beaver Builder

  • WooCommerce Product Variations

    So erstellen Sie WooCommerce-Produktvarianten

  • PostX 2.4.9 update

    PostX 2.4.9: Was ist neu?

  • WordPress Menu Customization in 2022 WordPress Theme

    Anpassung des WordPress-Menüs im Twenty Twenty-Two-Theme