Prozessoptimierung durch Koordination von Interessen

GUTES entdecken und zum BESTEN kombineren

Auf dieser Seite geht es darum die optimale Divi-Spaltenbreite für eingebettete Videos und Google-Präsentationen zu finden. Die Darstellung auf den verschiedenen Geräten
ist leider sehr unterschiedlich. Zweitens ganz unten um die Verwendung der Divi-Sektion „Fullwidth Header“ ebenfallls auf den verschiedenen Geräten:

PC, iPad, iPhone und Samsung S7

Wir hatten hier auch das Divi-Plugin „Divi Pop Up Builder“ getestet. Zweck des Popup Festers ist, den „Besucher/Leser“ auf der eigenen Seite zu behalten. Wird das PopUp geschlossen, dann ist der der Leser immer noch auf der Seite. Außerdem ist die Ladezeit der Webseite schneller, weil das Video nicht vorgeladen wird. Der Divi Pop Up Builder verspricht hier auf dieser Webseite die Lösung für nur 16USD. Sie können sich dort per Klick auf die Taste „Watch Intro“ die Funktion anschauen.  Wir hatten dieses Plugin gekauft und wieder gelöscht. Nachfolgend beschreiben wir die Mängel.

Das Update bei einer neuen Version wird nicht automatisch wie üblich  eingespielt – man muss das selbst erledigen. Es wird für jede neue Version Bezahlung fällig (in unserem Fall: Installation am 4.4.2019 – Upgrade angeboten am 1.5.2019). Zugegeben spielen  16,00USD keine wesentliche Rolle, aber wenn auch das Upgrade nicht bringt was man erwartet, dann ist die eigene verbratene Zeit viel zu kostbar. Wir lassen es, kein Interesse, keine weiteren Tests.     

Klick auf eine Taste zeigte per PopUp ein Video von Youtube.  Nur mit Youtube hat es funktioniert! Wenn man nur Videos von Youtube anzeigen will, wäre das PopUp-Modul OK. Aber man schützt sich natürlich auch damit nicht vor der YouTube-Werbung. Am Ende des Videos werden natürlich genauso fremde Youtube-Videos angezeigt. Klickt der Besucher drauf, dann ist er bei Youtube und hat damit unsere Seite verlassen. Das einzig positive ist: Schließt der Besucher tatsächlich das PopUp-Fenster, landet er wieder auf der Ausgangsseite.  Guter Ansatz, aber den Aufwand nicht wert, weil das eben nur „mit Youtube-Videos“ funktioniert. 

Klick auf eine Taste sollte per PopUp ein Video von CloudUp anzeigen das hat nicht funktioniertt. 

Video bei CloudUp ist die Alternative. Entweder eingebettet oder als Direktlink: https://cldup.com/PyypV7FBkh.mp4 Der Vorteil ist dann, dass keine unerwünschte fremde Werbung und nach dem Anschauen keine anderen Videos gezeigt werden. Der Besucher schließt jetzt einfach das zusätzlich geöffnete Browser-Fenster und ist dann wieder auf der Ausgangsseite.  Die Vollbildfunktion funktioniert, auch auf dem Ipad-Air, auch auf einem alten iPhone 4s. Nach beenden des Vollbilds  landet der Besucher auf der Webseite. Das Einbetten eines Videos von CloudUp kostet zwar mehr eigene Arbeitszeit, als das Einbetten eines Videos von YouTube.  

Die Taste unter dem Video wurde mit dem Standard Divi Modul „Button“ gemacht. Auch das funktioniert, ist aber im Vergleich zu dem darüber angezeigten ingebetteten Video nicht schön.

Auf der Filmklappe ist ebenfalls der gleiche Link platziert.

Google Slides

GSlide funktioniert generell nicht als PopUp (siehe oben). Es wird immer eine neue Seite angezeigt. Das kann man auch durch einen Link im Text erreichen.

Optimale Spaltenbreite, beim Theme Divi, für das eingebettete Video… 

1/2 + 1/2

  • am PC sind auch alle folgenden Varianten gleich groß, der Einbettungslink von Cloudup bietet keine Größeneinstellung
  • IPhone4S: das Videofenster ist bei allen Varianten gleich groß
  • ipadAir: das Videofenster ist kleiner als bei  3/5+2/5

Dieser rechts platzierte Text ist zu weit vom Video entfernt. Es gibt keine Möglichket das Video rechts auszurichten.  

3/5 + 2/5

Die beste Variante wegen iPad und anderen Tablets. Auf dem PC sieht das allerdings nicht  gut aus, weil der Abstand zum Video noch größer wird.

3/4 + 1/4

Der Abstand zwischen Video und Text wird umso schlechter, je breiter die linke Spalte mit dem Video wird. 

2/5 + 3/5 


Umgedreht sieht es besser aus, man kann nämlich den Text rechtsbündig formatieren.
Jetzt steht der Text auf Smartphone
leider über dem nachfolgenden Video.
Gewohnt ist man, dass der Text zum Bild/Video darunter steht. 

In der folgenden Sektion geht es um die optimale Divi Spaltenbreite für GSlides.   

480x299  in Divi 3/5 + 2/5

Das ist OK auf allen Geräten

iPhone4S: minimaler schwarzer Balken oben und unten kein Vollbild möglich 
Link  Besser ist eventuell zusätzlich ein Direkt-Link zur Präsentation (Neues Fenster), weil auf Apple Geräten kein Vollbild aktiviert werden kann. Generell nicht bei Verwendung anderer Browser als Safari, getestet mit Firefox und Chrome. Aber auch wenn Safari verwendet wird, ist die Vollbildfunktion nicht auf älteren Apple Geräten möglich wie z.B. iPhone4s. 

iPadAir: 100% OK der Text wird neben der Präsentation angezeigt, Vollbild (Safari) ist möglich.

SamsungS7: 100% OK der Text wird unter der Präsentation angezeigt, Vollbild (Chrome+Firefox) ist möglich. 

960 x 569 in Divi 3/5 + 2/5

Negativ oben und unten ein großer schwarzer Balken auf: iPhone4S, iPadAir, SamsungS7

 

 

 

 

Mischung mal Video mal Präsentation

Zusatztext: Für diese Überschrift wurde die Sektion "Fullwidth Header" eingesetzt. Ohne Nutzung der verfügbaren Tasten. Einfach nur um eine Trennung, mit Überschrift in voller Breite zu realisieren.

Text zur Präsentation im Modul unter dem iFrame

G Slide eingebettet 960x569 in Divi 3/5 + 2/5

iPhone4S: minimaler schwarzer Balken oben und unten kein Vollbild möglich.  Man könnte nur für die „Apple-Nutzer“ zusätzlich einen Direkt-Link zur Präsentation (Neues Fenster) anbieten, weil auf Apple Geräten kein Vollbild aktiviert werden kann.  Generell nicht, bei Verwendung anderer Browser als Safari, getestet mit Firefox und Chrome. Aber auch wenn Safari verwendet wird, ist die Vollbildfunktion auf älteren Apple Geräten nicht möglich.  Entscheidung: wir machen keinen zusätzlichen Direkt-Link.

iPadAir: 100% OK der Text wird neben der Präsentation angezeigt, Vollbild (Safari) ist möglich.

SamsungS7: 100% OK der Text wird unter der Präsentation angezeigt, Vollbild (Chrome+Firefox) ist möglich. 

2/5(leer) + 3/5 

Text zum Video wird in ein Text-Modul unter dem Video geschrieben. Damit ist das Ausrichtungsproblem für Text in einem eigenen Modul, rechts oder links vom Video erledigt.

Divi Sektion 1/1 also volle Breite, zentriert ausgerichtet. Google Slide Größe: width=“960″ height=“569″

Fazit:

Das einbetten von Videos ist OK auf allen Geräten. Es spielt bezüglich Darstellung keine Rolle ob das Video bei YouTube oder bei Cloudup liegt. Den Text zum Video sollte man wegen der unterschiedlichen Reihenfolge auf Smartphones und Tablets immer unter das Video machen. Besser (nicht schöner) ist das Symbol, weil man damit auf allen Geräten ein einheitliches Ergebnis bekommt – eine neue Seite, bei der auch das schließen des Vollbilds funktioniert:

oder das 

Das einbetten von G-Slides funktioniert auf Apple Geräten nicht, bzw. nur wenn Safari verwendet wird. Außerdem kostet das Laden der Präsentation viel Leistung, weshalb wir künftig darauf verzichten und stattdessen ein Symbol anzeigen:
   

Hier steht der Titel

Hier der Untertitel

 

Oben eine Sektion „Fullwidth Header“ mit einem Bild – sonst nichts. Darunter noch eine zweite Sektion „Fullwidth Header“.  Auf das Bild könnte man ebenfalls einen Link legen. Aber wenn man das macht, wird das Bild nicht mehr in voller Breite angezeigt.  Entscheidung: wir machen das nicht.

Über diesem Zusatztext muss man eine Leerzeile einfügen, sonst wird der Text direkt ohne Zwischenraum unter den Zusatztext positioniert.

Man kann auf die ganze Sektion einen Link legen, man kann für diesen Link  einstellen ob gleiches oder neues Fenster. Entscheidung: wir machen das nicht, Denn es weiß ja niemand, dass man hier durch klicken in den Text etwas auslöst.

Die Sektion bietet die Möglichkeit zwei Tasten anzuzeigen, jeweils mit der Möglichkeit einen Link zu hinterlegen. Bei Klick auf die Taste wird der Link aber immer im gleichen Fester geöffnet. Klickt man dann nicht im Browser auf zurück, dann ist die Seite weg. 
Entscheidung: wenn wir das Divi-Mudul „Fullwith Header“ verwenden, dann benutzen wir nur eine Taste, mit der Funktion: „Produkt kaufen“ es wird das Produkt im Shop angezeigt „Call to Action“.

 

Fazit hierzu:
Der „Fullwidth Header“ bietet ein schönes Ergebnis und sollte eingesetzt werden.

Test-Taste