WordPress: Theme Twenty Seventeen

Header-Medien: Bilder und Videos im Header

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Header-Bilder werden auf der Startseite sehr groß und auf den anderen Seiten kleiner dargestellt. Header-Videos sind optional und können vom eigenen Webspace oder per YouTube-URL eingefügt werden.

Transkript

Die Header-Bilder und Header-Videos spielen auf der Startseite von Twenty Seventeen eine große Rolle. Und nun möchte ich Ihnen den entsprechenden Bereich im Customizer vorstellen. Hier, Header-Medien heißt der hier. In den meisten Themes steht dort Header-Bild, Header-Medien deshalb weil wie gesagt hier ein Video oder ein Bild eingefügt werden kann. Wenn wir ein Video einfügen, ein Header-Video, dann muss auf jeden Fall auch ein Bild eingefügt werden. Das Bild wird dann als Fallback benutzt, bis das Video geladen ist. Und auch auf den anderen Seiten, also auf den Seiten, die nicht die Startseite sind. Denn auf diesen Seiten, ich klicke jetzt mal auf Kontakt, dann sehen Sie, hier wird kein Video-Header unterstützt, den Video-Header, den gibt es nur auf der Startseite. Also, Fazit, ein Bild ist Pficht, sofern Sie ein Bild haben wollen. Ein Video nicht, also beginnen wir hier mit dem Header-Bild, und schauen uns dann an, wie es mit dem Video funktioniert. Zum Bild, da gibt es eigentlich wenig dazu zu erzählen. Dieses Bild ist vorgegeben, das ist nicht in der Mediathek. Übrigens, falls Sie sich fragen, wo dieses Bild herkommt, dann sehen Sie hier den Ordner, den Theme-Ordner. Im Ordner Assets gibt es Images, und hier sind die Bilder, die mitgeliefert werden, die werden direkt von hier eingebunden. Das aber nur am Rande. Sie können hier natürlich ein neues Bild hinzufügen, direkt aus der Mediathek, hier die Abmessung, das wären 2000 * 1200. Dann auswählen und zuschneiden, wenn das Format passt, kann man das Zuschneiden überspringen, ich möchte dieses Bild aber gar nicht hinzufügen, dieses hier soll für das Video-Training völlig ausreichen. Wenn Sie mehrere Bilder eingefügt haben, dann können Sie das Erscheinungsbild, wortwörtlich, zufällig anordnen lassen, dann werden zufällige Bilder gewählt, und Ihre Besucher sehen jedes Mal etwas anderes. Ob das eine gute Idee ist, sei dahingestellt, aber es ist möglich. Soviel zu den Bildern, also, man braucht große Bilder, hochqualitative Bilder, 2000 * 1200 gilt als Minimum. Machen Sie sich keine Sorgen darüber, dass diese großen Bilder an die kleinen Geräte geschickt werden. Twenty Seventeen unterstützt responsive Bilder, und jedes Gerät erhält automatisch im Hintergrund die optimale Grafik. Es ist also nicht so, dass das riesige Header-Bild automatisch auch an kleine Handys geschickt wird. Wenn diese kleinen Handys diese großen Bilder nicht benötigen, dann bekommen sie sie auch nicht. Responsive Bilder, eine der Neuerungen in den letzten WordPress Versionen, das Theme muss es unterstützen, und Twenty Seventeen tut das. So, jetzt aber rüber zum Video. Header-Video nur auf der Startseite, ich bin hier auf der Startseite, und deswegen erscheint hier die Möglichkeit, ein Video einzufügen. Header-Video, mp4-Format, minimiere die Größe, damit ist die Dateigröße gemeint, um das beste Ergebnis zu erhalten. Dein Theme empfiehlt eine Größe von mal wieder 2000 * 1200 Pixel. Sie können jetzt ein Video auswählen, und auf ihren eigenen Webspace hochladen, allerdings sollten Sie dann schon einen ziemlich gut ausgestatteten Webspace haben, denn wenn Sie mehrere Besucher haben, und die wollen alle das Video bekommen, das ist für einen Shared Webhosting Server doch schon ziemlicher Stress. Einfacher ist es in vielen Fällen, eine YouTube-URL einzugeben. Mein Kollege Morten Rand-Hendriksen hat ein Header-Video hier bereits vorbereitet, ich kopiere mir einfach nur die URL und füge sie hier ein, und sobald ich irgendwo anders hinklicke, wird hier gearbeitet, und das Header-Video erscheint. Sound gibt es dabei nicht, der wird nicht abgespielt, und automatisch oben erscheint die Pausetaste, mit der der Besucher das Video notfalls anhalten kann. So, Sie sehen jetzt hier, das Video funktioniert, das bewegt sich ganz wunderbar, nur durch Einfügen der YouTube-URL, auf den anderen Seiten, ich gehe hier nochmal wieder auf die Kontaktseite, da sehen Sie, da bleibt das Header-Bild. Die beiden sollten also im optimalen Falle zueinander passen, und ich kehre zurück zur Startseite. So, und hier ist das Video im Augenblick nicht mehr drin, ich werde es sowieso rausnehmen, denn ich bleibe für dieses Training bei einem normalen Header-Bild. Eine weitere Möglichkeit ist es, das Header-Bild einfach auszublenden. Dann haben Sie hier im hellen Farbschema oben einen hellgrauen Bereich, und wenn ich zurückgehe in den Farbenbereich, und hier auf Dunkel wechsele, dann sehen Sie dann wird oben der Bereich auch dunkel. Das ist etwas weniger auffallend, die Beitragsbilder bleiben natürlich, aber das ist eine weitere Option, ich wechsele mal wieder zurück auf Hell. Das kann man noch eben zeigen, hier die Textfarbe bei Dunkel kann man natürlich auch entsprechend auswählen, da kann man recht schöne Kombinationen machen, aber ich bleibe erstmal bei Hell, und werde im Bereich Header-Medien doch hier dieses Standard-Bild wieder einbauen. So, Header-Video raus, Header-Bild ist drin, es ist in einer angemessenen Größe, weil es ist die Standardgrafik, und ich klicke auf Speichern & Publizieren. und schaue mir das Ganze noch einmal an, so sieht es aus!

WordPress: Theme Twenty Seventeen

Lernen Sie das WordPress-Theme Twenty Seventeen kennen – von der Auswahl, Installation und individueller Anpassung im Customizer bis hin zum praktischen Einsatz.

58 min (13 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:15.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!