So aktivieren Sie die Punktnavigation im Video-Slider-Modul Ihres Divi

Die Punktnavigation ist eine der häufigsten Formen der Navigation in Schiebereglern. Dies gilt unabhängig vom Inhalt des Schiebereglers. Die Punktnavigation bietet Benutzern eine einfache und intuitive Möglichkeit, durch den Inhalt des Schiebereglers zu navigieren. Glücklicherweise enthält das Video Slider-Modul von Divi eine Punktnavigationsoption. In diesem Artikel erfahren Sie, wie Sie die Punktnavigation im Video Slider-Modul Ihres Divi aktivieren. Wir werden unterwegs auch einige Kombinationen von Optionen untersuchen.

Lass uns anfangen.

Divi Video Slider Standardnavigation

Sehen wir uns zunächst an, wie die Navigation im Video Slider-Modul funktioniert. Standardmäßig wird jede Folie als Miniaturansicht unter dem Videoplayer angezeigt. Die aktuelle Folie wird mit einem Overlay abgedunkelt. In diesem Beispiel ist die Folie ganz links die aktive Folie.

Durch Auswählen der Miniaturansicht einer Folie navigiert der Videoplayer zu dieser Folie. In diesem Beispiel ist die dritte Folie von links die aktive Folie. Die Miniaturansicht ist dunkler, um anzuzeigen, dass es sich um die aktive Folie handelt. Ich habe nur auf das Vorschaubild geklickt.

Wir können auch mit den Pfeilen navigieren, die erscheinen, wenn wir mit der Maus über die aktive Folie fahren. Diese bringen uns zur vorherigen oder nächsten Folie. Diese sind hilfreich, wenn Sie jeweils eine Folie vorwärts oder rückwärts durch die Folien gehen möchten. Dies ist ideal, um durch einige Folien zu navigieren. Wenn Sie viele Folien haben, kann es eine Weile dauern, bis Sie ein bestimmtes Video finden.

Was ist Punktnavigation?

Die Punktnavigation ist eine kleine Gruppe von Punkten, die unten auf der Videofolie angezeigt werden. Jeder Punkt repräsentiert eine Videofolie innerhalb des Schiebereglers. Durch Klicken auf einen Punkt wird diese Folie im Videoplayer angezeigt. Der Punkt für die aktive Folie ist heller als die anderen Punkte. Es ist eine großartige Möglichkeit, um zu sehen, wie viele Folien vorhanden sind, wo sich der Schieberegler in der Liste der Folien befindet, und um schnell zu einer bestimmten Folie zu navigieren.

Die Punktnavigation ist besonders hilfreich, wenn Sie viele Folien haben oder Platz sparen möchten. Die Navigation wurde ähnlich wie die Navigation in Miniaturansichten verbessert, während weniger Platz innerhalb des Layouts beansprucht und das visuelle Durcheinander reduziert wird.

Wenn der Benutzer eine bestimmte Folie sehen möchte, muss er nicht warten, bis der Schieberegler sie ihm erneut anzeigt, oder die Pfeile verwenden, um durch die Folien zu blättern, bis er zu der gewünschten Folie gelangt. Sie können einfach die Folie auswählen, die sie sehen möchten, indem sie auf den Punkt klicken.

Aktivieren der Punktnavigation im Video-Schieberegler

Miniaturansichten sehen toll aus, nehmen aber zusätzlichen Platz ein. Manchmal möchten wir einen kleineren Platzbedarf für unser Video Slider-Modul oder ein übersichtlicheres Design. Wenn es aktiviert ist, ersetzt die Punktnavigation die Miniaturnavigation und gibt uns ein saubereres und weniger überladenes Design. Wir können es mit oder ohne Navigationspfeile verwenden.

Um die Punktnavigation im Video-Slider-Modul zu aktivieren, aktivieren Sie zunächst den Visual Builder , indem Sie auf den Link oben auf Ihrer Seite klicken. Bewegen Sie als Nächstes den Mauszeiger über das Video-Slider-Modul und klicken Sie auf das Zahnradsymbol, um seine Einstellungen zu öffnen.

Scrollen Sie nach unten zu Elemente . Hier sehen Sie eine Option zum Aktivieren oder Deaktivieren der Pfeile und ein Dropdown-Feld mit der Bezeichnung Slider Controls .

Klicken Sie auf das Dropdown-Feld , um Ihre Optionen anzuzeigen.

Wählen Sie Punktnavigation verwenden und Sie sehen, dass die Miniaturansichten entfernt und Punkte zur Hauptfolie hinzugefügt wurden.

• Schieberegler: Verwenden Sie die Punktnavigation

Ihr Video-Slider sieht jetzt einfacher aus und nimmt weniger Platz ein. Sie sehen einen Punkt für jede Folie. Wenn Sie also viele Folien haben, wird es besser auffallen.

Navigation mit hellen oder dunklen Punkten

Die Standardfarbe für die Punktnavigation ist Weiß. Dies funktioniert hervorragend bei dunklen Videobildern und Überlagerungen, aber es kann schwer zu erkennen sein, ob diese Bilder oder Überlagerungen hell sind. Glücklicherweise können Sie sie mit einer einfachen Steuerung an Ihre Bedürfnisse anpassen.

Gehen Sie auf der Registerkarte Design der Video-Slider-Einstellungen zu Slider Controls Color und wählen Sie Dark aus dem Dropdown-Feld aus.

• Farbe der Schieberegler: Dunkel

Die dunkle Slider Controls Color funktioniert besonders gut mit hellen Bildern oder einer Thumbnail Overlay Color wie im Beispiel unten. Testen Sie unbedingt Ihre Farboptionen für die Punktnavigation, um zu sehen, welche am besten mit Ihren Bild- und Überlagerungsfarben funktioniert.

Video Slider Punktnavigation ohne Pfeilnavigation

Durch den Wechsel von der Miniaturansicht zur Punktnavigation wird der Folie selbst ein weiterer Satz Navigationsschaltflächen hinzugefügt. Sowohl Pfeile als auch Punkte werden jetzt angezeigt, wenn der Benutzer mit der Maus über die Folie fährt, und die Punkte sind immer sichtbar. Da der Benutzer die Punkte immer sehen wird, können Sie sich entscheiden, die Pfeile nicht einzuschließen.

Glücklicherweise haben Sie die Möglichkeit, die Pfeile zu deaktivieren. In den Inhaltseinstellungen des Video-Slider-Moduls sehen Sie einen Abschnitt namens Elemente . Dieser Abschnitt hat eine Einstellung namens Show Arrows . Dies ist standardmäßig aktiviert. Klicken Sie einfach, um es zu deaktivieren.

• Pfeile anzeigen: Nein

Der Video-Schieberegler zeigt jetzt die Folien nur mit der Punktnavigation an, wenn ich mit der Maus darüber fahre.

Beispiele für die Navigation mit Video-Slider-Punkten

Sehen wir uns an, wie das Divi Video Slider-Modul in einem Divi-Layout mit Punktnavigation aussieht. Für meine Beispiele verwende ich die About-Seite aus dem kostenlosen Cafe Layout Pack, das in Divi verfügbar ist. Diese Seite enthält ein Videomodul, das über Hintergrundbildern von Kaffeebildern für die Caféumgebung platziert wird.

Hier ist das Layout der About-Seite:

Hier ist eine Nahaufnahme des Abschnitts, den ich anpasse. Sie können die Bilder im Hintergrund sehen. Wenn wir mit dem Design nicht vorsichtig sind, können wir es leicht überladen aussehen lassen.

Vereinfachung des Designs

Zuerst habe ich das Video-Modul durch ein Video-Slider-Modul ersetzt. Als Nächstes habe ich vier Folien erstellt und jeder Folie Bildüberlagerungen hinzugefügt. Ich habe die Standardnavigation aktiviert gelassen. Es funktioniert, aber die Thumbnail-Navigation sieht mit diesem Hintergrund etwas überladen aus. Es gibt zu viele Bilder auf engem Raum und es wird sehr schnell unübersichtlich. Das ursprüngliche Videomodul sah sauberer aus. Die Punktnavigation wird dies beheben.

Hier ist das Video Slider-Modul mit aktivierter Punktnavigation. Es hat das einfachere und sauberere Aussehen des Videomoduls und kann immer noch als Video-Schieberegler verwendet werden. Abgesehen von den zusätzlichen Punkten auf dem Bild sieht es genauso aus wie das ursprüngliche Videomodul.

Ändern des Designs auf Mobilgeräten

Die Punkte sind möglicherweise zu klein oder schwierig auf Ihrem Video-Slider zu verwenden, wenn Sie ihn mit Smartphones verwenden. In diesem Fall können Sie die Thumbnail-Navigation nur auf Telefonen verwenden und die Punktnavigation auf Desktops und Tablets beibehalten.

Klicken Sie in den Slider Controls-Einstellungen auf das Tablet-Symbol , um die Optionen für die Bildschirmgröße zu öffnen. Wählen Sie das Telefonsymbol und dann Use Thumbnail Track . Dadurch wird die Thumbnail-Navigation für Telefone aktiviert, sodass auf Desktops und Tablets die Punktnavigation angezeigt wird. Benutzer haben jetzt eine einfache Möglichkeit, unabhängig von der Bildschirmgröße ihres Geräts durch die Folien zu navigieren.

Endgedanken

Das ist unser Blick darauf, wie Sie die Punktnavigation im Video Slider-Modul Ihres Divi aktivieren. Punkte bieten ein einfaches und sauberes Design, das sich hervorragend für jedes Layout eignet. Die Punkte sind intuitiv, sodass Benutzer bereits wissen, wie man mit ihnen navigiert. Die Auswahl zwischen hellen und dunklen Farboptionen gibt Ihnen eine gewisse Flexibilität, sodass sie gut mit Ihren Bildern und Überlagerungen funktionieren. Divis Video Slider Punktnavigation ist eine ausgezeichnete Wahl, wenn Sie einen sauberen und minimalen Look für Ihre Video-Slider wünschen.

Wir wollen von dir hören. Verwenden Sie die Punktnavigation in Ihrem Divi Video Slider-Modul? Lass es uns in den Kommentaren unten wissen.