Allgemeine Bildgröße:
Das Theme arbeitet mit dem Twitter-Grid. Dies ist eine Standardgröße aktueller Websites. Die Aufteilung ist wie folgt:
1 Spalte: 1080 Pixel
¾ Spalte: 795 Pixel
⅔ Spalte: 700 Pixel
½ Spalte: 510 Pixel
⅓ Spalte: 320 Pixel
¼ Spalte: 225 Pixel
Vollbreite Slider verhalten sich anders!
Beachte, dass sich Vollbild-Slider und Parallax-Effekte an die Größe der Bildschirmgröße/auflösung orientieren.
Die Höhe ergibt sich aus Breite = 100% x Höhe
Damit sollten die Bilder auf Breite eines Standard-Browser-Fensters optimiert werden, d.h. mindestens 1280px breit. Ich nutze oft ein breiteres (aber nicht ganz so hohes Format),wie beispielsweise 1440x400px. Aber dies hängt vor allem von deinem Motiv und deiner Absicht ab (soll der Bildschirm kompett gefüllt werden, soll Platz für die erste Headline bleiben, etc.)
Die Höhe des Sliders errechnet sich aus den verwendeten Bildern. Wenn du deine Bilder als Panorama anlegst, wird der Slider automatisch schmaler.
Minimal-Hohe erzwingen
Du kannst die Höhe auch erzwingen. Gehe dazu in das Modul SLIDER und öffne ERWEITERTE DESIGNEINSTELLUNGEN. Hier kannst du nun ABSTAND OBEN/UNTEN festlegen. Trage z.B. oben/unten 200 px ein, wenn dein SLider 400 Pixel hoch sein soll.
Maximal-Höhe erzwingen
Du kannst auch per CSS die Höhe in Pixel festlegen, allerdings ist der Slider dann nicht mehr responsive. Füge dazu in deiner style.css (DESIGN > EDITOR) diesen Code für 50px Höhe hinzu:
.et_pb_slider .et_pb_slide {
height: 50px;
}
Größe (Hohe) des Bildausschnitts begrenzen
Du kannst auch per CSS die Höhe des Bildausschnitts in Pixel festlegen. Füge dazu in deiner style.css (DESIGN > EDITOR) diesen Code für 200px Höhe hinzu:
.et_pb_gallery .et_pb_gallery_items {
height: 200px !important;
}
Die 200px bestimmen die Höhe des Bildausschnitts des Sliders.
Warum sich der Bildausschnitt bei vollbreiten Slidern ändert
Im responsive Design ändert sich zwangsweise der Ausschnitt, da man sonst auf dem Smartphone den Rest der Seite nicht sehen würde. Der Ausschnitt ist also immer relativ zur Auflösung. Du kannst aber beim Slider unter „erweiterte Designoptionen“ einen festen Abstand angeben (zB oben: 200 // unten: 200 = 400 Pixel). In dem Augenblick ist der Slider aber nicht mehr responsive, sondern nutzt deine 400 Pixel.
Beachte, dass der Slider dann auf einem Smartphone sehr groß wirken kann.
FAZIT: Technisch gibt nur 2 Lösungswege:
1. Das Bild wird je nach Auflsung verzogen und gezerrt (irgendwie muss es ja von ganz links bis ganz rechts kommen)
2. Das Bild wird auf die maximale Breite gesetzt und dann in der Höhe proportional angepasst.
Letzterer Weg ist der professionelle und gängige Weg.
Tipp: Ich würde Texte nicht auf das Bild bauen, sondern über das Slidermodul einfügen. Hier wird der Text ausgelesen und zentriert zur Sliderhöhe sauber angezeigt (und nicht angeschnitten).
Tipp 2: Du könntest eine Mindesthöhe definieren (über die erweiterten Designanpassung im Modul: Abstand oben / unten). Dann müsstest du etwas ausprobieren, wo du deinen Text auf dem Bild platzierst (vermutlich möglichst mittig), sodass Textelemente auf dem Bild auch bei ungünstigen Auflösungen nicht angeschnitten werden.
