So fügen Sie einer WordPress-Site einen Videohintergrund hinzu

Suchen Sie nach der einfachsten Möglichkeit, einen WordPress-Videohintergrund hinzuzufügen?

Gut gemachte Videohintergründe erregen Aufmerksamkeit und lassen Marken von Anfang an cool aussehen. Aber wenn es schlecht gemacht ist, verlangsamt ein Videohintergrund Ihre Website, nimmt Platz ein und verwirrt neue Besucher. Aus diesem Grund haben wir diesen Leitfaden erstellt, damit Sie alle Fallstricke vermeiden und stattdessen lernen können, wie Sie einen WordPress-Videohintergrund richtig hinzufügen .

Lesen Sie weiter, um mehr über die Best Practices und Schritte zum Hinzufügen eines Videohintergrunds zu Ihrer WordPress-Website zu erfahren, und das alles ohne besondere technische Kenntnisse.

Best Practices zum Hinzufügen eines WordPress-Videohintergrunds

• Halten Sie die Dateigröße niedrig, aber die Auflösung hoch: Nichts beeinträchtigt die Leistung Ihrer Website mehr als große Videos und Bilder; Dennoch ist es vorzuziehen, die Auflösung während der Komprimierung beizubehalten.
• Übertreiben Sie es nicht: Zu viele Videos überladen Ihre Benutzeroberfläche; Verwenden Sie sie nur, um einen Punkt zu machen oder etwas Relevantes zu präsentieren.
• Fügen Sie einen Call-to-Action mit zusätzlichen Informationen ein: Lassen Sie die Zuschauer nicht nach mehr verlangen und vergessen Sie dann einen Link, der zu weiteren Details führt.
• Vermeiden Sie Audio um jeden Preis: Es ist irritierend, wenn alle Leute nur Ihre Website sehen wollen.
• Wenn Audio erforderlich ist, lassen Sie es nicht auf Autoplay: Bieten Sie Benutzern eine Option zum Abspielen von Audio.
• Erwägen Sie Untertitel für Videos mit Ton: Nicht jeder kann sich Ihren Ton anhören, sei es aufgrund seines Standorts oder seiner Hörbehinderung.
• Externes Hosten: Ihr Website-Host ist wahrscheinlich nicht darauf ausgelegt, Videos bereitzustellen. Wählen Sie daher Websites wie Vimeo und YouTube, um die Leistung aufrechtzuerhalten, oder ziehen Sie eine spezielle Video-Hosting-Website in Betracht.
• Halten Sie sich an die besten Formate/Auflösungen: Wir sprechen nur von MP4s; mindestens 720p; h264-Codec.

Und denken Sie daran, dass nicht alle Websites Videos benötigen; Manchmal macht es die Benutzeroberfläche einfach unübersichtlich, langsam und unkonzentriert. Ein Anwalt zum Beispiel sollte sich eher an professionelle Fotos halten als an abgedroschene Handshaking-Videos, die ihre Website zwangsläufig verlangsamen.

So fügen Sie einen WordPress-Videohintergrund hinzu

Es gibt mehrere Methoden, um Videohintergrundfunktionen in WordPress zu aktivieren.

Wir konzentrieren uns auf vier verschiedene codefreie Lösungen:

1. Der eingebaute Cover-Block
2. Ein Hintergrund-/Header-Plugin
3. Ihr bevorzugtes Seitenerstellungs-Plugin
4. Verwendung eines Designs, das Videohintergründe oder -header unterstützt

Befolgen Sie die Schritte für jede Methode unten.

Option 1: Eingebauter Abdeckblock

Der native WordPress-Editor bietet einen sogenannten Cover -Block, um Hintergrundbilder hinter anderen Inhalten wie Text und Schaltflächen einzufügen.

Was viele WordPress-Benutzer nicht wissen, ist, dass der Cover -Block auch Videohintergründe unterstützt.

Schritt 1: Fügen Sie den Cover-Block hinzu

Gehen Sie zunächst zu der Seite, auf der Sie den Hintergrund hinzufügen möchten, und fügen Sie den Cover -Block hinzu.

Schritt 2: Laden Sie Ihr Video hoch

Wählen Sie für das Cover die Schaltfläche Hochladen oder Medienbibliothek aus, je nachdem, welche Schaltfläche Sie zum Hinzufügen von Videos verwenden möchten.

Der Cover -Block sagt nichts über die Unterstützung von Videos aus, also müssen Sie nur sicherstellen, dass Sie ein Video (wie ein MP4) aus der Medienbibliothek auswählen. Klicken Sie auf die Schaltfläche Auswählen , sobald Sie ein Video abgehakt haben.

Schritt 3: Überlagernden Vordergrundinhalt einfügen

Sie sollten nun eine Vorschau des Hintergrundvideos sehen. Sie können dem Cover gerne Vordergrundblöcke hinzufügen, wie z. B. Text oder Schaltflächen.

Schritt 4: Bearbeiten Sie die Cover-Einstellungen nach Bedarf

Cover-Einstellungen umfassen:

• Farbüberlagerungen: Ideal, um das Lesen von Text zu erleichtern
• Deckkraft: Auch hilfreich, um Inhalte im Vordergrund sichtbar zu machen
• Mindestabdeckungshöhe: Manchmal erforderlich, damit der WordPress-Videohintergrund mehr Platz einnimmt

Schritt 5: Sehen Sie sich Ihren WordPress-Videohintergrund in Aktion an

Wenn Sie fertig sind, speichern Sie die Seite und gehen Sie zum Frontend, um Ihren WordPress-Videohintergrund zu sehen!

Es gibt einige Plugins zum Hinzufügen von WordPress-Videohintergründen, von denen einige vollständige Site-Hintergründe bieten, während andere darauf ausgerichtet sind, Ihnen einen Video-Header zu geben.

Dies sind die besten Video-Hintergrund-Plugins:

️ Unser Favorit ist das Advanced WordPress Backgrounds-Plugin; Wir zeigen Ihnen, wie Sie mit diesem Plugin in nur wenigen Schritten einen WordPress-Videohintergrund hinzufügen.

Schritt 1: Installieren Sie AWB und fügen Sie seinen Inhaltsblock hinzu

Installieren Sie zunächst Advanced WordPress Backgrounds (AWB).

Gehen Sie zu der Seite, auf der Sie das Hintergrundvideo hinzufügen möchten.

Klicken Sie im WordPress-Editor auf , um einen Inhaltsblock hinzuzufügen. Suchen Sie nach dem Block Hintergrund (AWB) und wählen Sie ihn aus.

Schritt 2: Fügen Sie Ihr Video hinzu

Dadurch haben Sie die Möglichkeit, dem Element Farb-, Bild- oder Videohintergründe hinzuzufügen.

Wählen Sie Video aus und fügen Sie dann eine Video-URL von YouTube oder Vimeo ein. Als Alternative verfügt das Plugin über einen selbst gehosteten Tab zum Hochladen lokaler Videos.

Schritt 3: Erweitern Sie die Höhe und Breite des Videohintergrunds

Standardmäßig dehnt sich der Inhaltsblock nicht aus, um einen Großteil des Seitenbereichs abzudecken. Sie müssen im Editor auf die Schaltfläche Volle Höhe klicken. Es gibt auch eine Schaltfläche, um den Videohintergrund auf volle Breite zu erweitern.

Sie können auch Inhalte wie Text, Schaltflächen oder Bilder über das Hintergrundvideo ziehen oder einfügen.

Schritt 4: Ändern Sie die WordPress-Videohintergrundeinstellungen

Passen Sie die gewünschte Einstellung auf der Registerkarte Block an: Startzeit, Endzeit, Schleife, Immer abspielen, Video-Opazität.

Es ist ratsam, eine Hintergrundfarbüberlagerung mit verringerter Deckkraft hinzuzufügen; dadurch wird der überlagerte Text leichter lesbar.

Gehen Sie dazu auf die Registerkarte Block und ändern Sie die Farbe unter Hintergrundfarbe in Weiß oder Schwarz. Bewegen Sie den Schieberegler Deckkraft etwas nach unten, um sicherzustellen, dass der Hintergrund noch sichtbar ist.

Schritt 5: Sehen Sie sich die Ergebnisse an

Das Ergebnis ist ein Video, das vor anderen Inhalten abgespielt wird, idealerweise eines, das sich wiederholt, keinen Ton hat und sich dennoch hauptsächlich auf den Inhalt im Vordergrund konzentriert.

Option 3: Ihr bevorzugtes Seitenerstellungs-Plugin

Die meisten Seitenersteller, wie Elementor, WPBakery und Divi, bieten Hintergrundfunktionen, um nahezu jedem Inhaltsmodul einen Bild- oder Videohintergrund hinzuzufügen.

️ Fühlen Sie sich frei, den Seitenersteller Ihrer Wahl zu wählen, aber wir empfehlen Elementor aufgrund seiner Benutzerfreundlichkeit.

Stellen Sie sicher, dass Sie Elementor oder den Builder, den Sie verwenden möchten, installieren, bevor Sie beginnen.

Schritt 1: Öffnen Sie eine Seite mit dem Elementor-Editor

Gehen Sie zu Seiten in WordPress und wählen Sie die Seite aus, die als Ihre Homepage bezeichnet wird. Klicken Sie auf die Schaltfläche Mit Elementor bearbeiten .

Schritt 2: Fügen Sie einen Abschnittsinhaltsblock hinzu

Die meisten Inhaltsmodule in Elementor bieten Hintergrundeinstellungen, aber wir empfehlen, einen Abschnitt einzufügen. Auf diese Weise können Sie dem Abschnitt mehrere Elemente hinzufügen, z. B. Text, Bilder und Schaltflächen. Dann fügen Sie dem Abschnitt einen Videohintergrund hinzu, sodass er sich hinter allem im Vordergrund befindet.

Wir haben einem Abschnitt in unserem Tutorial Text und eine Schaltfläche hinzugefügt. Fahren Sie fort und wählen Sie das Symbol Abschnitt bearbeiten und dann die Registerkarte Stil .

Schritt 3: Fügen Sie Ihren Videohintergrund ein

Hier sehen Sie einen Hintergrund -Dropdown-Bereich. Wählen Sie die Option Video neben Hintergrundtyp . Fügen Sie dann eine URL von YouTube, Vimeo oder einer lokalen Datei in das Feld Videolink ein .

Schritt 4: Bearbeiten Sie die Videohintergrundeinstellungen

Möglicherweise müssen Sie den Videohintergrund erweitern, um mehr Bildschirmfläche einzunehmen. Wechseln Sie dazu auf die Registerkarte Layout und passen Sie Höhe und Mindesthöhe an.

Ziehen Sie auf der Registerkarte „ Stil “ in Betracht, die Einstellungen für das Hintergrundvideo zu ändern:

• Startzeit
• Endzeit
• Einmal spielen
• Spielen Sie auf dem Handy
• Datenschutzmodus

Denken Sie außerdem daran, eine Hintergrundüberlagerung hinzuzufügen – normalerweise eine neutrale Farbe wie Schwarz oder Weiß und einige Deckkraftänderungen – um Text, Schaltflächen und Bilder im Vordergrund besser sichtbar zu machen.

Schritt 5: Zeigen Sie den WordPress-Videohintergrund im Frontend an

Wenn Sie fertig sind, wird das Video hinter allen Inhalten im Abschnitt abgespielt!

Option 4: Verwenden Sie ein WordPress-Theme, das Videohintergründe/Header unterstützt

Verschiedene WordPress-Designs bieten integrierte Header-, Schieberegler- und ganzseitige Medieneinstellungen; Mit diesen können Sie ein Bild, GIF oder Video hochladen, um den gesamten Bildschirm einzunehmen, was am häufigsten als Kopfzeile für Ihre Homepage verwendet wird.

Um Themen mit Videohintergrundfunktionen zu finden, suchen Sie auf beliebten Marktplätzen nach „Videohintergrund“:

️ Achten Sie darauf, Feature-Listen zu scannen oder sogar den Entwickler vor dem Herunterladen/Kaufen zu fragen, um sicherzustellen, dass ein Design über Video-Hintergrund-Funktionalität verfügt.

Beispielsweise bietet das Colibri WP-Theme Videohintergründe.

Schritt 1: Installieren und aktivieren Sie das Design

Um einen Videohintergrund zu aktivieren, installieren Sie das Colibri WP-Design und gehen Sie dann zu Darstellung > Colibri-Einstellungen > Erste Schritte . Hier können Sie die Colibri Page Builder-Funktion aktivieren.

Schritt 2: Fügen Sie eine Demo-Site hinzu

Klicken Sie auf die Registerkarte Demo-Sites und importieren Sie die Demo-Vorlage Ihrer Wahl.

Schritt 3: Passen Sie das Heldenbild an

Navigiere zu Darstellung > Anpassen und wähle das Zahnradsymbol Einstellungen neben dem Hero -Modul aus.

Schritt 4: Fügen Sie einen Videohintergrund hinzu

Wählen Sie die Registerkarte „ Stil “ und schalten Sie den Hintergrund auf „ Video “ um.

Wählen Sie schließlich entweder YouTube aus, um eine externe Video - URL einzufügen, oder Selbst gehostet , um ein lokales Video hochzuladen.

Als Ergebnis sehen Sie den Videohintergrund in der Customizer-Vorschau in Bewegung.

Beginnen Sie mit dem perfekten Videohintergrund

In diesem Beitrag haben Sie vier verschiedene Methoden kennengelernt, von denen mindestens eine für Ihre Situation funktionieren sollte.

️ Weitere Möglichkeiten zur Verbesserung Ihrer Website finden Sie in unserem Beitrag mit 10 Elementen eines erfolgreichen Homepage-Designs.

Wenn Sie Fragen zu WordPress-Videohintergründen haben, teilen Sie Ihre Gedanken in den Kommentaren unten mit.