Einführung
Sitely verwenden
Elemente
Anleitungen
Zu diesem Thema ist ein Video-Tutorial verfügbar – Hier klicken, um es anzusehen
Das Hinzufügen von Videos zu Ihrer Webseite ist sehr unkompliziert, denn das Video-Element übernimmt die ganze Schwerarbeit. Fügen Sie das Element einfach zur Leinwand hinzu oder ziehen Sie eine MP4-/MOV-Videodatei direkt auf die Leinwand. Wenn das Element platziert ist, sieht es so aus – dies ist der Video-Platzhalter.
Wenn Sie ein Video auf die Leinwand gezogen haben, erscheint es wie ein Videoplayer, einschließlich Vorschaubild. Alles, was Sie dann noch tun müssen, ist die Player-Oberfläche zu gestalten und ihn Ihrer Webseite entsprechend zu positionieren und zu skalieren.
Bei der Platzhalter-Option müssen Sie dem Platzhalter eine Quelldatei hinzufügen, damit er wie ein Videoplayer erscheint. Das erledigen Sie über Sitelys vertrautes Stil-Panel.
Sie können aus mehreren Videoquellen wählen. Diese werden im Stil-Panel in einem Dropdown angezeigt. Mit den Optionen YouTube und Vimeo können Sie Videos von diesen beliebten Streaming-Plattformen einbetten. Geben Sie einfach die URL oder die ID des gewünschten Videos ein. Wenn Sie die Option „Von Festplatte“ wählen, können Sie eine Videodatei von Ihrem Laufwerk auswählen. Mit „Von Netzwerkadresse“ können Sie die URL einer Videodatei eingeben, die auf einem externen Server gehostet wird.
Als Nächstes entscheiden Sie, wo Sie Ihre Videodatei speichern möchten. Bei den Streaming-Optionen müssen Sie diese Entscheidung nicht treffen – das Video bleibt auf dem Server und wird auf Ihre Webseite gestreamt. Wenn Sie jedoch ein Video von Ihrer lokalen Festplatte hinzufügen, haben Sie die Möglichkeit, das Video an seinem aktuellen Speicherort zu belassen oder es in die Sitely-Projektdatei einzubetten. Das Einbetten kann sinnvoll sein, wenn Sie Ihre Seite künftig an einem anderen Computer weiterbearbeiten möchten oder die Videodatei eventuell an einen anderen Speicherort verschoben wird. Das Einbetten stellt sicher, dass die Datei für das Projekt stets verfügbar ist, erhöht jedoch die Größe Ihrer Sitely-Projektdatei.
Mit der Option Posterbild können Sie eine Szene aus Ihrem Video als Posterbild auswählen. Wenn Sie lieber ein vollständig angepasstes Bild verwenden möchten, können Sie weiter unten im Stil-Panel eines hinzufügen.
Im Abschnitt Optionen des Stil-Panels legen Sie fest, wie Ihr Video abgespielt wird und wie der Player für Ihre Besucher aussehen soll.
Die Option „Automatisch starten“ beginnt die Wiedergabe Ihres Videos, sobald es in die Seite geladen wurde. Bitte beachten Sie jedoch, dass das Video in diesem Fall ohne Ton abgespielt wird (es wird automatisch stummgeschaltet). Die Option „Schleife“ lässt das Video in Endlosschleife laufen – am Ende beginnt es wieder von vorn. Mit „Beim Scrollen abspielen“ wird das Video beim Scrollen der Seite abgespielt – eine Art Video-„Scrubber“, der den Fortschritt beim Scrollen vorantreibt.
Wenn Sie die Checkbox „Player-Steuerung“ aktivieren, erhalten Sie maximale Flexibilität bei der Gestaltung Ihres Videoplayers. Die Option „Auf dem Video“ erzeugt einen vertrauten Player mit allen deutlich sichtbaren Bedienelementen innerhalb der Player-Oberfläche. Sie können auswählen, welche Elemente der Steuerung sichtbar sind, und zudem eine Akzentfarbe festlegen. Alternativ können Sie die Option „Im Browser integriert“ verwenden. Dabei überlässt Sitely die Gestaltung der Videooberfläche dem Browser des Nutzers. In diesem Abschnitt können Sie auch ein eigenes Posterbild hinzufügen, falls Sie eines verwenden möchten.
Als Nächstes entscheiden Sie, wie das Video eingebettet werden soll. Zur Auswahl stehen:
Direktes Einbetten: Betten Sie das Video in seiner aktuellen Größe direkt in die Seite ein. Die Wiedergabe erfolgt über die Video-Steuerung auf der Seite.
Standbild + Einbetten: Erstellt ein Standbild auf der Seite; das Video wird erst nach einem Mausklick geladen und gestartet. Das kann die anfängliche Ladezeit der Seite verbessern, allerdings kann sich der Videostart verzögern.
Standbild + Einbetten in Lightbox: Ähnlich wie „Standbild + Einbetten“, jedoch öffnet sich der Videoplayer in einer Lightbox, wenn das Standbild angeklickt wird.
Im Tab „Anordnen“ auf der rechten Seite der Oberfläche gibt es eine weitere Option, mit der Sie Videos kreativer einsetzen können. So können Sie beispielsweise ein Video auf „Volle Seitenbreite“ setzen. Diese Option sorgt dafür, dass das Video die gesamte Breite des Browserfensters einnimmt. Ideal für Video-Header und Hero-Bereiche Ihrer Seiten.
So sieht ein Video-Header in voller Breite auf der Seite aus. Im Grunde wirkt das Video wie ein Hintergrundelement eines breiten Kastens. In dieser Verwendung hat das Video keine Bedienelemente – es ist für automatisches Abspielen und Endlosschleife gedacht und wird daher stummgeschaltet, wenn es eine Tonspur enthält. Das Video erstreckt sich über die gesamte Breite des Browsers, während seine Höhe durch die Größe des Kastens auf der Leinwand bestimmt wird. Das Video wird nie verzerrt – stattdessen wird es oben und unten beschnitten, sodass nur der im Kasten sichtbare Bereich angezeigt wird.
Halten Sie die Dateigrößen klein – wählen Sie Videos, die sich für Schleifen eignen, und entfernen Sie Tonspuren. Idealerweise sollten Hintergrundvideos weniger als 10 MB groß sein.
Es ist nicht immer ratsam, Streaming-Dienste für Hintergrundinhalte zu nutzen – insbesondere dann nicht, wenn der Dienst dazu neigt, zusammen mit Ihrem Video Werbung auszuliefern. Für die meisten Hintergrundvideos ist es besser, das Video auf dem eigenen Server zu hosten – verwenden Sie die Optionen „Von Festplatte“ oder „Netzwerkadresse“.
In manchen Situationen möchten Sie ein Video als Hintergrundelement für eine ganze Seite hinzufügen. Sitely ermöglicht dies über den Tab „Seite“ auf der rechten Seite der Oberfläche. Scrollen Sie einfach zum Abschnitt Hintergrund des Seiten-Tabs und wählen Sie Video als Hintergrundinhalt – die gleichen Optionen zur Auswahl einer Quellvideodatei stehen zur Verfügung.
Wenn Sie ein Video als Hintergrundelement hinzufügen, wird es in Seitenbreite (volle Browserbreite) platziert – die Höhe richtet sich proportional nach dem Seitenverhältnis des Videos. Die tatsächliche Größe auf der Seite variiert also je nach Breite des Browserfensters des Besuchers. Beim Scrollen der Seite scrollt auch das Video – genau wie andere Seitenelemente.
Wenn Ihr Video bei voller Browserhöhe und -breite an Ort und Stelle bleiben soll, aktivieren Sie die Option „Fixierte Position“. Dadurch wird das verfügbare Browserfenster mit dem Videoinhalt abgedeckt und fixiert. Der Seiteninhalt bewegt sich beim Scrollen über das Video.
Mitunter besteht der Bedarf, kleine animierte Elemente in eine Website zu integrieren, insbesondere wenn die vorhandenen Animationsoptionen von Sitely nicht ausreichen. Das gilt vor allem für Elemente wie kompakte animierte Anzeigen oder prägnante Überschriften, wie man sie im Web und in sozialen Medien häufig sieht. Zwar ist Sitely keine Videobearbeitungsanwendung, doch bietet es ein vielseitiges Video-Element, das Videos nahtlos in Webseiten integriert.
Anders als manche anderen Website-Builder zwingt Sitely beim Einbetten eines Players keine festen Video-Seitenverhältnisse auf. Das Video-Element passt sich mühelos dem Seitenverhältnis des enthaltenen Videos an. Wenn Sie also Videoelemente erstellen können, ist Sitely hervorragend darin, diese zu verarbeiten.
Betrachten Sie folgendes Beispiel: Stellen Sie sich eine Überschrift vor, in deren Mitte sich ein Wort dynamisch ändert. Um diesen Effekt zu erzielen, haben wir eine Videobearbeitungs-App wie das kostenlose und sehr empfehlenswerte CapCut verwendet. Im Wesentlichen haben wir eine Leinwand eingerichtet, die groß genug ist, um die vorgesehene Textgröße unserer Überschrift aufzunehmen. Nachdem wir den Text hinzugefügt und gestaltet sowie animierte Übergänge erstellt hatten, haben wir ein kleines MP4-Video erzeugt. Dieses wurde anschließend mit HandBrake für das Web optimiert (komprimiert).
In Sitely haben wir die Überschrift mit normalem Text aufgebaut und das kleine Video nahtlos integriert. Das Ergebnis ist visuell ansprechend und dynamisch.
Wir erstellen großartige
Websites mit SitelySitely
Durch die Kombination von Standard-Sitely-Elementen wie Text, Boxen, Icons und Video können Sie Ihrer Seite ganz einfach zusätzliche Bewegung verleihen. Hier ist ein weiteres Beispiel.
Schauen
Sie sich
das an
Und was ist mit diesen Story-Videos, die man auf Instagram usw. sieht? Auch sie lassen sich zu Ihrer Webseite hinzufügen, um Ihren Besuchern ein noch ansprechenderes Erlebnis zu bieten
In all den obigen Beispielen haben die Videos keine Tonspur, daher wurden sie auf Autoplay und Schleife eingestellt. Wenn Sie Videoclips auf diese Weise einsetzen möchten, hier ein paar allgemeine Regeln: Halten Sie die Dateigrößen klein. Verwenden Sie die Option „Von Festplatte“ – diese Arten von Clips eignen sich offensichtlich nicht am besten für die Bereitstellung über Videoportale. Sie können natürlich auch von einer Netzwerkadresse ausgeliefert werden, wenn Ihre Videos auf Ihrem Webserver gehostet sind. Gehen Sie mit dieser Technik schließlich sparsam um – Übertreibung kann Besucher verärgern. Sorgen Sie also dafür, dass es einen guten Grund für diese zusätzliche Ebene an Animation gibt.
Abgerundete Ecken bei Videos können Ihre Videoinhalte wie andere Seitenelemente wirken lassen und so ein einheitlicheres Erscheinungsbild schaffen. Hier sind einige Beispiele für Videoinhalte mit abgerundeten Ecken. Die Option finden Sie im Stil-Panel, wenn Ihr Video auf der Leinwand ausgewählt ist.
Bitte melden Sie uns alle Mängel in dieser Dokumentation, wir beheben sie so schnell wie möglich!
Aktualisiert für Sitely 6
Diese Website verwendet Cookies.
Bitte lesen Sie unsere Datenschutzerklärung für weitere Details.
